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高级教程》

以上就是javascript中table怎么删除行的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！