Table Javasc DOM操作（1）

Table Javasc DOM操作

Table对象集合

集合描述cells[]返回包含表格中所有单元格的一个数组rows[]返回包含表格中所有行的一个数组tBodies[]返回包含表格中所有 tbody 的一个数组

Table对象的方法：
Table对象方法方法
描述createCaption()为表格创建一个 caption 元素。createTFoot()在表格中创建一个空的 tFoot 元素。createTHead()在表格中创建一个空的 tHead 元素。deleteCaption()从表格删除 caption 元素以及其内容。deleteRow()从表格删除一行。deleteTFoot()从表格删除 tFoot 元素及其内容。deleteTHead()从表格删除 tHead 元素及其内容。insertRow()在表格中插入一个新行。

接下来，讲讲其具体运用：

通过点击某Ztree节点，动态增加表格一行数据（其中包括删除按钮），点击删除按钮能够将此行删除，在此同时将所有添加到表格中的数据进行记录；

var datas = new Array();        //存储插入表格中的数据IDvar count = 0;//存储插入表格中数据的总数function onClick(event, treeId, treeNode, clickFlag) {//查询后台查询本条数据的信息var nodedata = finddatainfo(treeNode.id);if(nodedata.success){var flag = true;if(nodedata.dataid == ""){flag = false;}var tableObj = document.getElementById("functionData");var rowCount = tableObj.rows.length;//循环迭代，查询此条数据是否已经添加本行数据for(var i = 1 ; i < rowCount ; i++){if(tableObj.rows[i].cells[0].innerHTML == nodedata.id){flag = false;break;}}//如果没有添加过，则添加数据if(flag){datas[count] = treeNode.id;count++;var rowObj = tableObj.insertRow(rowCount);var num = rowObj.insertCell(0);var id = rowObj.insertCell(1);var name = rowObj.insertCell(2);var btn = rowObj.insertCell(3);num.innerHTML=nodedata.id;id.innerHTML=nodedata.dataid;name.innerHTML=nodedata.dataname;btn.innerHTML="<button onclick='deleteRow(this)'>删除</button>";}}else{ alert(nodedata.info);}}//删除Table对象的本行function deleteRow(btn){var row = btn.parentNode.parentNode;var context = row.cells[0].innerHTML;var index = -1;for(var i = 0 ; i <= count ; i++){if(datas[i] == context){index = i;break;}}if(index != -1){var temp = datas[index];datas[index] = datas[count-1];datas[count-1] = temp;datas.pop();count--;var i = btn.parentNode.parentNode.rowIndex;document.getElementById('functionData').deleteRow(i);}}