js如何在table中插入一行

JavaScript018

js如何在table中插入一行,第1张

js如何在table中插入一行的方法是定位，插入：

1、通过id定位到myTable对象

var table = document.getElementById("myTable")

2、创建一个空的<tr>标签，并且插入到第一行：

var row = table.insertRow(0)

3、插入两列：

var cell1 = row.insertCell(0)

var cell2 = row.insertCell(1)

4、给列分别赋值：

cell1.innerHTML = "NEW CELL1"

cell2.innerHTML = "NEW CELL2"

table表任意复制一行的关键是复制哪行，插入到什么位置，如何插入。第 一个问题复制哪行，通常是点击某一行以确定复制的当前行，核心代码如下：var e = window.eventif (e.target) targ = e.targetelse if (e.srcElement) targ = e.srcElementif (targ.nodeType == 3)targ = targ.parentNodeif(targ.tagName=="TD")第 二个问题插入位置，通常是点击行的下面pos = targ.parentNode.rowIndex+1也有可能在表头首行pos =0再就是表尾"beforeEnd"第三个问题如何插入,先复制当前行：var con = targ.parentNode.cloneNode(true)再进行插入，可以是insertRow，也可以是insertAdjacentElement：var x=document.getElementById('myTable').insertRow(pos)；document.getElementById('myTable').insertAdjacentElement("beforeEnd",con)复制之后可对复制行里的内容进行修改调整：var y=x.insertCell(0).innerHTML=document.getElementById("cell1").value也可进行删除指定行：document.getElementById('myTable').removeChild(Obj.parentNode.rows[i])

表格的第一行为thead中的th

剩下的数据放到tbody中

最后那一行添加的放到tfoot中

对tbody下面的所有tr绑定一个点击事件

事件中获取这个tr下的所有td，就可以获取这行的数据了

大概代码如下:

var trs =document.getElementById("tbodyId").getElementsByTagName("tr")

for(int i=0i<=trs.lengthi++)

{

var tr = trs[i]；

var tds＝tr.getElementsByTagName("td")

//下面遍历tds就可以去获取数据了

//把数据放到下面的表单就好了

//然后提交数据，在服务端进行修改

}