1、在页面div中事先创建一个空白表格，可以根据需求而定。
2、表格创建好后，我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用。
3、在<tb>标签中我们添加了<input>标签，主要是用来提供用户输入参数， 而全局变量num，主要是用来区分每一个添加的参数的id的唯一性而存在的。
4、获得表格中的数据。
5、拿到表格中的数据后，我们根据它值的形式把它转换成json格式的数据。
<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>
比如设置table的id为tab
var trHTML = "<tr><td>...</td></tr>"
$("#tab").append(trHTML)//在table最后面添加一行
$("#tab tr:eq(2)").after(trHTML)// 在table的第3行后面添加一行这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行
$(function() {
$(":button").click(function() {
var tr = "<tr><td>new</td></tr>"
//$("table").append(tr)
$("table tr:eq(2)").after(tr)
})
})
这是我测试用的代码，你可以运行看看
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的模块可以分为：入口模块、底层支持模块和功能模块。其核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
