table的操作方法
我们先看一下table都有哪些属性和方法,table在页面中叫做HTMLTableElement。
table有几个跟操作table,tr,td的方法。
table的操作方法
table.insertRow([index])-插入一个tr。
tr.insertCell(index)-插入一个td。
table.createCaption()-table内创建一个table标题。
table.createTHead()-table内创建thead标签。
table.createTFoot()-标签内创建tfoot标签。
table.deleteRow(index)-删除一行tr。
table.deleteCaption()-删除表格标题。
table.deleteTHead()-删除表格thead标签元素。
table.deleteTFoot()-删除表格的tfoot标签元素。
tr的操作方法
insertCell([index])-插入一个td标签元素。
deleteCell(index)-删除一个td标签元素。
thead,tfoot的操作方法
fh_f.insertRow([index])-插入tr行元素。
fh_f.deleteRow(index)-删除tr元素
js动态创建table
下面,我们先用上面的方法通过js动态创建一个包含caption,thead,tfoot,tbody的table。var arr=[
["mooshine","girl","sunshine","lines"],
["月光","女孩","日光","平行线"],
["G","O","O","D"]
];
//创建table
var table=document.createElement("table");
//创建设置table的标题
var caption=table.createCaption();
caption.innerHTML="js operator table";
//给table的tbody添加tr,td,
addcells(table);
//创建thead添加tr,td
var head=table.createTHead();
addcells(head);
//创建tfoot添加tr,td。
var foot=table.createTFoot();
addcells(foot);
//将table添加到body中
document.body.appendChild(table);
//循环数组添加tr,td
function addcells(base){
var len=arr.length,
i=0;
for(;i
var row=base.insertRow();
var jarr=arr[i],
jlen=jarr.length,
j=0;
for(;j
var cell=row.insertCell();
cell.innerHTML=jarr[j];
}
}
}
创建的table效果如下:
这些代码是所有浏览器都兼容的。不过要注意一点,一定要先在table上添加tr,td,然后再在thead,tbody中添加tr,td。不然的话,table上添加的tr,td会归为在它上面的thead,或tfoot。
相关的css样式如下:table{border:1px solid #1D78B7;border-collapse: collapse;font-family:"微软雅黑";}
td{border:1px solid #1D78B7;height:32px;font-size:13px;text-align: center;color:#fff;padding:0 2em;}
thead{background:#8e44ad;}
tfoot{background:#e74c3c;}
tbody{background:#e67e22;}
那么我们看一下错误的顺序导致的结果。var head=table.createTHead();
addcells(head);
addcells(table);
//创建tfoot添加tr,td。
var foot=table.createTFoot();
addcells(foot);
我们把上面的代码稍作修改,把table上添加tr,td放到thead中,则结果变成这样:
本来期望在tbody中添加的tr,td跑到了thead中。同理,跟tfoot的关系也是这样。var head=table.createTHead();
addcells(head);
//创建tfoot添加tr,td。
var foot=table.createTFoot();
addcells(foot);
addcells(table);
我们把table添加tr,td放到tfoot后面,则结果如下:
期望在tbody的内容归结为tfoot中的内容了。所以我们一定要注意,table中有thead,tfoot的时候,必须先给table添加tr,td,后给thead,tfoot添加tr,td。因为DOM API中并没有“createTBody”的方法,只能先做table上添加tr,td,促使浏览器自动生成tbody标签。
可以创建table,那么我们还需要修改或者删除,上面列出了有“deleteRow”,"deleteCell"的方法来删除。
我们先来看看table,tr,td有什么属性和集合
table的集合
table.rows-table中所有tr的集合。
table.tBodies-table中所有tbody的集合。
table.cells-table中所有td的集合。(只有IE支持)
tr的属性和集合
tr.rowIndex-tr在rows集合中的位置。
tr.cells-tr中所有的td的集合
tr.sectionRowIndex-tr在thead,tfoot,tbody或者rows中的位置。
td的属性
td.cellIndex-td在cells集合中的位置。
td.colSpan-td合并的列数。
td.rowSpan-td合并的行数。
table的删除功能
现在我们在上面生成的table中添加一个删除的操作。var arr=[
["mooshine","girl","sunshine","lines"],
["月光","女孩","日光","平行线"],
["G","O","O","D"]
];
//创建table
var table=document.createElement("table");
//创建设置table的标题
var caption=table.createCaption();
caption.innerHTML="js operator table";
//给table的tbody添加tr,td,
addcells(table);
//创建thead添加tr,td
var head=table.createTHead();
addcells(head);
//创建tfoot添加tr,td。
var foot=table.createTFoot();
addcells(foot);
//将table添加到body中
document.getElementById("tbwrapper").appendChild(table);
console.log(table.cols);
//循环数组添加tr,td
function addcells(base){
var len=arr.length,
i=0;
for(;i
var row=base.insertRow(i);
var jarr=arr[i],
jlen=jarr.length,
j=0;
for(;j
var cell=row.insertCell(j);
cell.innerHTML="
}
}
}
function deltds(th){
var cell=th.parentElement.parentElement;
var index=cell.cellIndex;
console.log(index);
var row=cell.parentElement;
row.deleteCell(index);
}
我们添加了一个deltds方法,通过这个方法找到td的父tr,使用deleteCell来删除td。
对应的css也稍作了修改:table{border:1px solid #1D78B7;border-collapse: collapse;font-family:"微软雅黑";}
td{border:1px solid #1D78B7;}
thead{background:#8e44ad;}
tfoot{background:#e74c3c;}
tbody{background:#e67e22;}
.tdcont{position:relative;height:32px;line-height:32px;font-size:13px;text-align: center;color:#fff;padding:0 2em;}
.tdcls{position:absolute;cursor:pointer;font-family:sans-serif;
font-style:normal;width:18px;height:18px;line-height:18px;
background:#000000;color:#fff;right:0;top:0;display:none;text-align: center;font-size:14px;
}
td:hover .tdcls{display:block;}
对应的结果如下:
感觉看图片没意思,你可以点击链接查看效果:原生js创建table,可删除td。
总结
本文介绍了原生js对table的操作方式,虽然table在现在被标注为不推荐使用,但有时一些实现困难的复杂布局还是需要我们用table来实现的,比较table作为web的元老级别元素,还是大有裨益的。jquery的泛滥迷失了我们对table的认识,因此摆脱jquery的魔法,掌握table的操作技能是非常必要的。