js Table 操作

在DOM中，Table的行、列、单元格都是以数组方式进行存储和访问的。所以，对Table的操作其实也就是对DOM数组的操作。

1.Table操作

  /* 创建： */
  document.createElement("TABLE");
  /* 删除： */
  box.parentNode.removeChild(box);//获取父节点再删除
  box.removeNode(true);//直接删除

  /* 部分属性修改 */
  obj.setAttribute("id", id);//此方法在IE中对cellSpacing， cellsPadding不兼容
  obj.cellSpacing = 1;
  obj.cellsPadding = 2;
  obj.className = "packageData";

2.行操作
 

/* 插入： */
  row = t.insertRow(num);
  /* 删除： */
  t.deleteRow(num);
  /* 获取当前行号 */
  num = tr.rowIndex;

3.列操作
 

/* 插入： */
  cell = tr.insertCell(num);
  /* 删除： */
  tr.deleteCell(num);
  /* 获取当前行号 */
  num = td.cellIndex ;

4.示例代码
 

/* 添加行 */
  function doAddRow(tableid){
	var t = document.getElementById(tableid);
	var rows = t.rows;
	var num = rows.length;
	var row = t.insertRow(num);
	var trid = tableid + "_tr_" + num;
	row.setAttribute("id", trid);
	//alert(tableid + "_tr_" + num);
	row.className = "td_list_background";
	var cell = row.insertCell(0);
	cell.innerHTML = num;
	
	cell = row.insertCell(1);
	cell.className = "dcontent";
	cell.innerHTML = '<input type="text" name="data_content"/><img src="<%=request.getContextPath() %>/images/img_lookup.gif" width="15" height="15" style="cursor:hand"/>';
	
	cell = row.insertCell(2);
	cell.className = "dcontent";
	cell.innerHTML = '<input type="text" name="data_content"/>';
	
	cell = row.insertCell(3);
	cell.innerHTML = '<input type="button" value="-" onclick="doDelRow(\'' + tableid + "\',\'" + trid + '\')" class="buttonbg01" style="width:18px"></input>';
	
  } 


  /* 删除行 */
  function doDelRow(tableid, trid){
	var t = document.getElementById(tableid);
	var tr = document.getElementById(trid);
	var num = tr.rowIndex;
	t.deleteRow(num);
  }

  
  /* 添加列 */
  function addCell (){
	var t = document.getElementById("inspecttable");
	t.width = parseInt(t.width) + 31;
	var oBody=t.tBodies[0];
	var rows=oBody.rows;
	
	var celllength = rows[1].cells.length;
	cell = rows[1].insertCell(celllength);
	cell.innerHTML = celllength + 1;
	for(var i = 2; i < rows.length - 2; i++){
		var name = rows[i].cells[4].firstChild.name;
		celllength = rows[i].cells.length;
		cell = rows[i].insertCell(celllength);
		cell.width="30"
		cell.innerHTML = '<input size="3" type="text" name="' + name + '"/>';
	}
	/*
	var name = rows[rows.length - 4].cells[3].firstChild.name;
	celllength = rows[rows.length - 4].cells.length;
	cell = rows[rows.length - 4].insertCell(celllength);
	cell.width="30"
	cell.innerHTML = '<input type="checkbox" name="' + name + '" value="' + (celllength - 1) + '"/>';
	*/	
	rows[0].cells[3].colSpan = rows[0].cells[3].colSpan + 1;
	rows[rows.length-1].cells[1].colSpan = rows[rows.length-1].cells[1].colSpan + 1;
	rows[rows.length-2].cells[1].colSpan = rows[rows.length-2].cells[1].colSpan + 1;
	//rows[rows.length-3].cells[1].colSpan = rows[rows.length-3].cells[1].colSpan + 1;
  }


  /** 添加表 **/
  function addDataPackage(){
	var div = document.getElementById("dataPackage");
	var t = document.createElement("TABLE");
	t.className = "packageItem";
	var row = t.insertRow(0);
	var cell = row.insertCell(0);
	cell.className = "Lable";
	cell.innerHTML = "分包合同或工程";
	
	cell = row.insertCell(1);
	cell.className = "Content";
	cell.innerHTML = '<input type="text" name="TDeliverBillDto.billcode" size="35" /><img src="<%=request.getContextPath() %>/images/img_lookup.gif" width="15" height="15" style="cursor:hand"/>';
	
	cell = row.insertCell(2);
	cell.className = "closeBlock";
	cell.innerHTML = '<img src="<%=request.getContextPath() %>/images/oa/delete.gif" width="15" height="15" style="cursor:hand"/>';
	
	row = t.insertRow(1);
	cell = row.insertCell(0);
	cell.className = "Lable";
	cell.innerHTML = "资料详细";
	
	cell = row.insertCell(1);
	cell.colSpan = '2';
	cell.className = "Content";
	
	/** begin 创建子表 **/
	var subt = document.createElement("TABLE");
	subt.className = "packageData"
	//subt.setAttribute('cellspacing', '1');
	subt.cellSpacing = 1;
	row = subt.insertRow(0);
	subcell = row.insertCell(0);
	subcell.className = "dtitle";
	subcell.style.width = "10%";
	subcell.innerHTML = "序号";
	
	subcell = row.insertCell(1);
	subcell.className = "dtitle";
	subcell.style.width = "40%";
	subcell.innerHTML = "资料类别";
	
	subcell = row.insertCell(2);
	subcell.className = "dtitle";
	subcell.style.width = "50%";
	subcell.innerHTML = "资料内容";
	
	subcell = row.insertCell(3);
	subcell.className = "dtitle";
	subcell.style.width = "20px";
	
	row = subt.insertRow(1);
	subcell = row.insertCell(0);
	subcell.className = "dcontent";
	subcell.innerHTML = "1";
	
	subcell = row.insertCell(1);
	subcell.className = "dcontent";
	subcell.innerHTML = '<input type="text" name="data_type"/><img src="<%=request.getContextPath() %>/images/img_lookup.gif" width="15" height="15" style="cursor:hand"/>';
	
	subcell = row.insertCell(2);
	subcell.className = "dcontent";
	subcell.innerHTML = '<input type="text" name="data_content"/>';
	
	subcell = row.insertCell(3);
	subcell.className = "dcontent";
	subcell.style.padding = "0px";
	subcell.innerHTML = '<input type="button" class="buttonbg01" onclick="doAddRow()" value="+" style="width:18px"/>';
	/** end **/
	cell.appendChild(subt);
	 
	row = t.insertRow(2);
	cell = row.insertCell(0);
	cell.className = "Lable";
	cell.innerHTML = "寄送备注";
	
	cell = row.insertCell(1);
	cell.colSpan = '2';
	cell.className = "Content";
	cell.innerHTML = '<textarea name="TDeliverBillDto.deliverremark" cols="80" rows="6"></textarea>';
	
	div.appendChild(t);
  }