javascript中table删除行的实现方法:首先创建一个HTML示例文件;然后定义一个table表格;最后通过“function deleteRow(_this){...}”方法实现删除行的功能即可。
本文操作环境:windows7系统、javascript1.8.5版,DELL G3电脑
javascript中table怎么删除行?
我一共写了三种方法来实现添加行的功能,写了一种方法来实现删除行的功能,主要感觉是一定要熟悉JavaScript的API,其实这些东西api文档里面都有,就看你是否知道JavaScript中有这个函数或属性,然后把这些属性和函数整合起来就是你想要的东西。
所有HTML元素都能用的常用函数:node.appendChild(node)、
所有HTML元素都能用的常用属性:element.tagName
document对象的常用方法:document.createElement(name)
< table>中的常用函数:tableObject.insertRow(index)、tableObject.deleteRow(index)
< table>中的常用属性:tableObject.rows、tableObject.rows.length
< tr >中的常用函数:tablerowObject.insertCell(index)
< tr>中的常用属性:tablerowObject.rowIndex
<style type=text/css> table{ border:1px solid #000; border-collapse: collapse; } th,td{ border:1px solid #000; padding:6px; } </style> <script type=text/javascript> 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 = <a onclick='delete(this)'>删除</a>; 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 = <td>李四</td><td>102</td><td>四海</td><td><a onclick='deleteRow(this)'>删除</a></td>; } 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 = <a onclick='deleteRow(this)'>删除</a>; } //不能传初始化时当前元素所在行的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); } } </script>
推荐学习:《javascript高级教程》
原文地址:https://www.jb51.cc/js/1204600.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。