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>