js动态添加和删除table的行例子

<table id="table_report" class="table table-striped table-bordered table-hover">

<thead>
<tr>
<th>编码</th>
<th>名称</th>
<th>排序</th>
<th>备注</th>
<th  style="width: 80px;" class="center"><a class="btn btn-mini btn-success" onclick="insertTableRow();" >新增</a></th>
</tr>
</thead>

<tbody>

<tr>
<td>
<input type="text" name="subCode" />
</td>
<td><input type="text" name="subName" /></td>
<td><input type="text" name="orderNum" /></td>
<td><textarea rows="1" cols="10" name="subMemo" ></textarea></td>
<td style="width: 80px;" class="center">
<div >
<a class='btn btn-mini btn-danger' title="删除" onclick="deleteTableRow()" >删除</a>
</div>
</td>
</tr>

</tbody>
</table>

<script>
function insertTableRow(){
var tableId = "table_report";
var table = document.getElementById(tableId);
var row = table.insertRow();//默认-1从最后一行插入,insertRow(0)的话就是从第一行插入

var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();

cell1.innerHTML = "<input type=\"text\" name=\"subCode\" />";
cell2.innerHTML = "<input type=\"text\" name=\"subName\" />";
cell3.innerHTML = "<input type=\"text\" name=\"orderNum\" />";
cell4.innerHTML = "<textarea rows=\"1\" cols=\"10\" name=\"subMemo\" ></textarea>";
cell5.innerHTML = "<div ><a class='btn btn-mini btn-danger' title=\"删除\" onclick=\"deleteTableRow()\" >删除</a></div>";

cell5.className="center";
cell5.style.width="80px";

}

function deleteTableRow(){
var tableId = "table_report";
//因为a标签的上级还有个div，所以多一层parentNode
var index = event.srcElement.parentNode.parentNode.parentNode.rowIndex;
var table = document.getElementById(tableId);
table.deleteRow(index);
}
</script>