资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

javascript中的table怎么删除行

本篇内容主要讲解“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


    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怎么删除行
网页路径:http://cdkjz.cn/article/gdjipj.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220