首页 > 代码库 > js-动态为table插入、删除行
js-动态为table插入、删除行
CreateTime--2017年4月15日08:09:43
Author:Marydon
js-动态插入、删除table行
用到table的insertRow()和deleteRow()方法
<input id = "userName" type="button" value="增加行" onclick="insertRow();"/><input id = "userName" type="button" value="删除行1" onclick="delRow();"/><input id = "userName" type="button" value="删除行3" onclick="delRow3();"/><table id="testTab" border="1" style="border-collapse: collapse;" width="99%"> <tr> <td>a1</td> <td>a2</td> <td>a3</td> </tr></table>
1.动态插入行
/** * 在最后一个tr后插入行 */function insertRow () { var table = document.getElementById("testTab"); var newRow = table.insertRow(-1);//新增行（最后一行） var newCell1 = newRow.insertCell(0);//第一列 newCell1.innerHTML = "b1"; var newCell2 = newRow.insertCell(1);//第二个单元格 newCell2.innerHTML = "b2"; var newCell3 = newRow.insertCell(2);//第三个单元格 newCell3.innerHTML = "b3"; newRow.insertCell(3).innerHTML = "<input type=‘button‘ value=http://www.mamicode.com/‘删除行2‘ onclick=‘delRow2(this);‘/>"}
2.删除行
/** * 删除最后一行tr */function delRow () { var table = document.getElementById("testTab"); var lastRowIndex = table.rows.length - 1;//最后一个tr的索引值 table.deleteRow(lastRowIndex); }
/** * 删除指定行 * @param {Object} rowIndex * 行索引 */function delRow2 (inputObj) { var trObj = inputObj.parentNode.parentNode; var rowIndex = trObj.rowIndex; var table = trObj.parentNode; table.deleteRow(rowIndex);}
/** * 有参无参都可以 * @param {Object} obj */function delRow3 (obj) { var tableObj = null; var rowIndex = -1; if (obj) { tableObj = obj.parentNode.parentNode.parentNode; rowIndex = obj.parentNode.parentNode.rowIndex; } else{ tableObj = document.getElementById("testTab"); rowIndex = tableObj.rows.length - 1; } tableObj.deleteRow(rowIndex); }
js-动态为table插入、删除行
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。