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();	        //存储插入表格中的数据ID
	var 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);
		}
	}

版权声明：本文为博主原创文章，未经博主允许不得转载。