<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動態表格</title>
<style type="text/css">
body{ background-color:#9CC; text-align:center}
table{ margin:10px auto;}
tr th { border: 1px solid #096;}
td{border: 1px solid #096;}
</style>
<script type="text/javascript">
/*在函數的外部只能聲明一些變量之類的，不能用操作方法，因為沒有函數去調用執行它。*/
//在載入頁面的時候就在表格頭放入選擇框，因為是一次性的
window.onload = function(){
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
//在第一行第一列上加入選擇框
var inp = document.createElement('input');
inp.type = 'checkbox';
//DOM Leve 2 事件注冊
catchEvent(inp,'click',function(){ //注冊函數 不同狀態進行判斷
if(inp.checked ==true){
allSelect();
}else{
cancelSelect();
}
});
//catchEvent(inp,'click',allSelect);
//catchEvent(inp,'change',cancelSelect);
childtd[0].appendChild(inp);
}
//增加一行
//var count =0;//增加一列用來 計數
function addRow(){
//count++;
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
var tr = document.createElement('tr');
var arrtd = new Array();
var arrinp = new Array();
for(var i =0;i<childtd.length;i++){
arrtd[i] = document.createElement('td');
arrinp[i] = document.createElement('input');
if(i==0){
arrinp[i].type = 'checkbox';
arrinp[i].name = 'selectbox';
}else if(i==1){
//arrinp[i] = document.createTextNode(count);
arrinp[i] = document.createTextNode('');
}
arrtd[i].appendChild(arrinp[i]);//思考為什么 input也要加上數組。
tr.appendChild(arrtd[i]);
}
tab.appendChild(tr);
newSort();
}
//刪除操作
function deleteRow(){
var parentTr = new Array();//先把被選中的行放在一個數組上
var box = document.getElementsByName('selectbox');
var tab = document.getElementById('tab');
for(var i = 0;i<box.length;i++){
if(box[i].checked==true){
var parent = box[i].parentNode;
parentTr[i] = parent.parentNode;//如果直接這種為放在里面為什么不能完全刪除？？是因為反應不夠嗎？
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ //這樣做才能把選中的全部刪除
if(parentTr[i]){ //這邊要先判斷一下是否為空值，如果不為空才去移除，否者會報錯。
tab.removeChild(parentTr[i]);
}
}
newSort();
}
//如果執行刪除的話則，重新進行排序
function newSort(){
var text = new Array();
var child_td = new Array();
var arr_tr = document.getElementsByTagName('tr');
for(var i = 1;i<arr_tr.length;i++){
child_td[i] = arr_tr[i].childNodes[1];//獲得從第二行開始所有第二列的節點
if(child_td[i].childNodes[0]){
child_td[i].removeChild(child_td[i].childNodes[0]);
}
text[i] = document.createTextNode(i);
child_td[i].appendChild(text[i]);
}
}
//全選操作
function allSelect(){
var box = document.getElementsByName('selectbox');
for(var i= 0;i<box.length;i++){
box[i].checked = true;
}
}
//全部取消選擇
function cancelSelect(){
var box = document.getElementsByName('selectbox');
for(var i = 0;i<box.length;i++){
if(box[i].checked == true){
box[i].checked =false;
}
}
}
//事件注冊函數
function catchEvent(eventobj,event,eventHandler){
if(eventobj.addEventListener){
eventobj.addEventListener(event,eventHandler,false);
}else if(eventobj.attachEvent){
event = 'on'+event;
eventobj.attachEvent(event,eventHandler);
}
}
//catchEvent(add,'click',addRow);
</script>
</head>
<body>
<h3>動態表格</h3>
<input type="button" value="增加" id="add" onclick="addRow()" />
<input type="button" value="全部選擇" onclick="allSelect()" />
<input type="button" value="全部取消" onclick="cancelSelect()" />
<input type="button" value="刪除" id="delete" onclick="deleteRow()"/>
<table id="tab" cellpadding="5px" cellspacing="0px">
<tr><td></td><td>序號</td><td>題目一</td><td>題目二</td><td>題目三</td></tr>
</table>
</body>
</html></span>
