如何用JS实现动态加行~

表格部分代码如下：

<table id="testTbl" border=1>

<tr id="tr1">

<td width=6%><input type=checkbox id="box1"></td>

<td id="b">第一行</td>

</tr>

<tr id="tr2">

<td width=6%><input type=checkbox id="box2"></td>

<td id="b">第二行</td>

</tr>

<tr bgcolor=#0000FF>

<td width=6%><input type=checkbox id="box3"></td>

<td>第三行</td>

</tr>

</table>

动态添加表行的javascript函数如下：

function addRow(){

//添加一行

var newTr = testTbl.insertRow()

//添加两列

var newTd0 = newTr.insertCell()

var newTd1 = newTr.insertCell()

//设置列内容和属性

newTd0.innerHTML = '<input type=checkbox id="box4">'

newTd2.innerText= '新加行'

}

1、在页面div中事先创建一个空白表格，可以根据需求而定。

2、表格创建好后，我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用。

3、在<tb>标签中我们添加了<input>标签，主要是用来提供用户输入参数， 而全局变量num，主要是用来区分每一个添加的参数的id的唯一性而存在的。

4、获得表格中的数据。

5、拿到表格中的数据后，我们根据它值的形式把它转换成json格式的数据。

一、动态加载表格

1.首先在html中为表格的添加位置设置id

即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下

<div id="tdl"><div>

2.在javascript中写添加表格的语句

若在当前html文件中，则写在<script>标签内部，如

复制代码 代码如下:

<script type="text/javascript" >

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建

</script>

若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句

复制代码 代码如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

然后再引入自己的html文件

复制代码 代码如下:

<script type="text/javascript" src="test.js"></script>

二、 动态添加表格行

1.首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下

复制代码 代码如下:

<table>

<thead></thead>

<tfoot><tfoot>//tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。

<tbody id="rows"></tbody>

</table>

[\s\S ]*\n

2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下

[code]

row=document.createElement("tr")//创建行

td1=document.createElement("tr")//创建单元格

td1.appendChild(document.createTextNode("content"))//为单元格添加内容

row.appendChild(td1)//将单元格添加到行内

document.getElementById("rows").append(row)//将行添加到<tbody>中

---