js动态添加表格

<script type="text/javascript">

var $ = function(id){

return document.getElementById(id)

}

//全选

function checkAll(target) {

var checkeds = document.getElementsByName("b_id")

for (var i = 0i <checkeds.lengthi++) {

checkeds[i].checked = target.checked

}

}

//刷新行号

function refreshRowNo() {

var tbody = $("tbody")

for (var i = 0i <tbody.rows.lengthi++) {

tbody.rows[i].cells[0].innerHTML = i + 1

}

}

//添加行

function AddRow() {

var tbody = $("tbody")

var row = tbody.insertRow(tbody.rows.length)

row.insertCell(row.cells.length)

row.insertCell(row.cells.length).innerHTML = '<input type="checkbox" name="b_id" />'

row.insertCell(row.cells.length).innerHTML = '<input type="text" name="name" />'

row.insertCell(row.cells.length).innerHTML = '<input type="text" name="number" />'

row.insertCell(row.cells.length).innerHTML = '<input type="text" name="price" />'

row.insertCell(row.cells.length).innerHTML = '<input type="text" name="sum" />'

refreshRowNo()

}

//删除行

function DelRow() {

var checkeds = document.getElementsByName("b_id")

var ischeck = false

for (var i = checkeds.length - 1i >= 0i--) {

if (checkeds[i].checked) {

ischeck = true

break

}

}

if (ischeck) {

if (confirm("确定删除选中行?")) {

for (var i = checkeds.length - 1i >= 0i--) {

if (checkeds[i].checked) {

var index = checkeds[i].parentNode.parentNode.rowIndex

$("tbody").deleteRow(index - 1)

}

}

refreshRowNo()

}

} else {

alert("请选中需要删除的行!")

}

}

//保存

function Save() {

var detail = [],

tbody = $("tbody")

for (var i = 0i <tbody.rows.lengthi++) {

var name = tbody.rows[i].cells[2].childNodes[0].value

var number = tbody.rows[i].cells[3].childNodes[0].value

var price = tbody.rows[i].cells[4].childNodes[0].value

var sum = tbody.rows[i].cells[5].childNodes[0].value

var item = name + "^" + number + "^" + price + "^" + sum

detail.push(item)

}

var detailstr = detail.join("|")

$("detail").value = detailstr

$("myform").submit()

}

</script>

<form name="myform" action="AddOrder.aspx" method="post">

<input type="hidden" id="detail" name="detail" />

<ul>

<li>采购单编号：<input type="text" id="CGDBH" name="CGDBH" /></li>

<li>

供应商名称：<input type="text" id="GYSMC" name="GYSMC" />

<input type="button" onclick="AddRow()" value="增加一行" />

<input type="button" onclick="DelRow()" value="删除" />

<input type="button" onclick="Save()" value="保存" />

</li>

</ul>

<table cellpadding="1" cellspacing="2">

<tr>

<th style="width:60px">序号</th>

<th style="width:20px"><input type="checkbox" onclick="checkAll(this)" /></th>

<th style="width:120px">名称</th>

<th style="width:120px">数量</th>

<th style="width:120px">单价</th>

<th style="width:120px">总金额</th>

</tr>

<tbody id="tbody">

<tr>

<td>1</td>

<td><input type="checkbox" name="b_id" /></td>

<td><input type="text" name="name" /></td>

<td><input type="text" name="number" /></td>

<td><input type="text" name="price" /></td>

<td><input type="text" name="sum" /></td>

</tr>

</tbody>

</table>

</form>

1．在页面div中创建一个空白表，可以根据需要对其进行定制。

2．创建表之后，我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。

3.在<TB >标签中，我们添加了标签，主要用于提供用户输入参数，而全局变量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>中

---