本篇内容主要讲解“javascript中的table怎么删除行”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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怎么删除行”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
