javascript中table删除行的实现方法：首先创建一个HTML示例文件；然后定义一个table表格；最后通过“function deleteRow(_this){…}”方法实现删除行的功能即可。
本文操作环境：windows7系统、javascript1.8.5版，DELL G3电脑
javascript中table怎么删除行？
JavaScript为table动态添加、删除行
我一共写了三种方法来实现添加行的功能，写了一种方法来实现删除行的功能，主要感觉是一定要熟悉JavaScript的API，其实这些东西API文档里面都有，就看你是否知道JavaScript中有这个函数或属性，然后把这些属性和函数整合起来就是你想要的东西。
立即学习“Java免费学习笔记（深入）”；
所有HTML元素都能用的常用函数：node.appendChild(node)、
所有HTML元素都能用的常用属性：element.tagName
document对象的常用方法：document.createElement(name)
中的常用函数：tableObject.insertRow(index)、tableObject.deleteRow(index)
中的常用属性：tableObject.rows、tableObject.rows.length
中的常用函数：tablerowObject.insertCell(index)
中的常用属性：tablerowObject.rowIndex
table{ border:1px solid #000; border-collapse: collapse; } th,td{ border:1px solid #000; padding:6px; } function addRow1(){ var userInfo = document.getElementById("userInfo"); var row = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML = "李四"; var td2 = document.createElement("td"); td2.innerHTML = "102"; var td3 = document.createElement("td"); td3.innerHTML = "北海"; var td4 = document.createElement("td"); td4.innerHTML = "删除"; row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); row.appendChild(td4); userInfo.appendChild(row); } function addRow2(){ var userInfo = document.getElementById("userInfo"); var rowLength = userInfo.rows.length; //新行将被插入index所在行之前。若index等于表中的行数，则新行将被附加到表的末尾。 //返回一个TableRow，表示新插入的行。 var tableRow = userInfo.insertRow(rowLength); tableRow.innerHTML = "李四102四海删除"; } function addRow3(){ var userInfo = document.getElementById("userInfo"); //计算rows.length时会把表头包含在内 var rowLength = userInfo.rows.length; var tableRow = userInfo.insertRow(rowLength); //新单元格将被插入当前位于 index 指定位置的表元之前 //如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。 var tableCell0 = tableRow.insertCell(0); var tableCell1 = tableRow.insertCell(1); var tableCell2 = tableRow.insertCell(2); var tableCell3 = tableRow.insertCell(3); tableCell0.innerHTML = "李四"; tableCell1.innerHTML = "103"; tableCell2.innerHTML = "黑海"; tableCell3.innerHTML = "删除"; } //不能传初始化时当前元素所在行的rowIndex，因为删除操作之后当前元素所在行的rowIndex会发送变化 function deleteRow(_this){ var userInfo = document.getElementById("userInfo"); var rowIndex = getTrIndex(_this); //deleteRow() 方法用于从表格删除指定位置的行 //参数 index 指定了要删除的行在表中的位置 userInfo.deleteRow(rowIndex); } function getTrIndex(element){ if(element.tagName.toLowerCase() == "tr"){ //rowIndex属性返回某一行在表格的行集合中的位置（row index） return element.rowIndex; }else{ return getTrIndex(element.parentNode); } }
登录后复制
推荐学习：《javascript高级教程》
以上就是javascript中table怎么删除行的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2710793.html
