jQuery，不仅可以以少量的代码做很多操作，而且兼容性好（各种浏览器，各种版本）。
下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作
1.jQuery代码
<script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//添加行
function AddRow() {
var newRowNumber = $("#tab1>tbody>tr").length+;
$("#tab1>tbody").append("<tr><td><input type='checkbox' name='dateItem' /></td><td>" + newRowNumber + "</td><td><input type='text' style='width:90%' /></td></tr>");
}
//删除行
function DelRow() {
var rowCount = $("#tab1>tbody>tr").length;
var checkedCounts = $("input[type='checkbox'][name='dateItem']:checked").length;
if (checkedCounts > && checkedCounts != rowCount) {
$("input[type='checkbox'][name='dateItem']:checked").each(function () {
$(this).parents("tr").remove();
});
ResetOrder(); //刷新表序号
}
else if (checkedCounts == ) {
alert("请选择!");
}
else if(checkedCounts == rowCount) {
alert("至少保留一行!");
}
}
//刷新表序号
function ResetOrder() {
var rowCount = $("#tab1>tbody>tr").length;
for(var i=;i<rowCount;i++){
$("#tab1>tbody>tr:eq("+i+")>td:eq(1)").html(i+);
}
}
</script>
2.html代码
<div class="table_toolbar">
<a style="width: 50px; color: Blue" onclick="DelRow();">删除</a>
<astyle="width: 50px; color: Blue" onclick="AddRow();">添加</a>
</div>
<div class="table_box_data">
<input type="hidden" id="hid" name="hid" />
<table id="tab1">
<thead>
<tr>
<td width="30px"><input type="checkbox" id="cb_select" title="全选" /></td>
<td width="30px">序号</td>
<td>链接地址</td>
</tr>
</thead>
<tbody id="tbody"></tbody>
<tfoot><tr><td colspan=""></td></tr></tfoot>
</table>
</div>
3.结果