<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=\"删除\" οnclick=\"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>