本篇内容介绍了“javascript中的table如何删除行”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
我们提供的服务有：网站设计制作、做网站、微信公众号开发、网站优化、网站认证、高唐ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的高唐网站制作公司
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
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中的table如何删除行”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
网页名称：javascript中的table如何删除行
网页URL：
http://cdxtjz.cn/article/pepsgi.html
