原生js html insert,原生js操作Table元素的方法,使用insetRow,insertCell

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="

"+jarr[j]+" ×

";

}

}

}

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的操作技能是非常必要的。