在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);
}
分享到:
相关推荐
资源提供js操作html、table导出生成excel文件,代码简介易懂
一个JS写的 操作table大全 里面包括合并 拆分。删除 添加 基本都有。如果还要实现特殊的效果 请大家自己改造改造
js 代码操作 table 排序功能
JavaScript操作select JavaScript操作table
使用javascript脚本向页面中的table添加和删除行
js操作table的特效分享
通过js来操作table行的动态添加删除,进行相关的操作
低调发布,因为是小样版本,集成了几个简单的方法...写此类的目的一个事方便操作table二是可以引入ajax做无刷新分页啥的 当然这些还没做 只是最简单实用的方法 争取尽快完善,引入ajax元素。尽请期待。 demo地址: ...
javascript 操作 table的一个例子. 可以下去研究下
通过js获取table中当前选择的一行的行号,获取当前行号后可以进行对应的操作
js操作HTML增加删除TR/TD (学前班级别的哈!)
javascript 操作 Table 排序!
针对Table的操作,针对Table增加/删除 行和列,向上移,向下移.etc
js动态创建table点击按钮dom table tr添加操作
操作table,绑定某行数据到另外页面,例如修改操作,回显数据
本文代码主要实现了javascript如何操作table并动态添加行的方法
用js添加表<table>里的一行,并且清楚里的数据
用js实现 表格行的表格,上移 ,下移,置顶,置底操作 直接引入js 快捷方便 支持ctrl键同时选择多行操作 支持选中行改变样式 支持行号显示 支持未选择行时移动提示
NULL 博文链接:https://lee20101029.iteye.com/blog/870156
此代码是实现单击操作表格,用js和css 简单的实现类似于编辑器中的table