本篇内容介绍了“javascript中的table如何删除行”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
javascript中table删除行的实现方法：首先创建一个HTML示例文件；然后定义一个table表格；最后通过“function deleteRow(_this){...}”方法实现删除行的功能即可。
本文操作环境：windows7系统、javascript1.8.5版，DELL G3电脑
javascript中table怎么删除行？
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中的table如何删除行”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4218785/blog/4392058
