本篇內(nèi)容介紹了“javascript中的table如何刪除行”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、高唐ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的高唐網(wǎng)站制作公司

javascript中table刪除行的實(shí)現(xiàn)方法：首先創(chuàng)建一個(gè)HTML示例文件；然后定義一個(gè)table表格；最后通過(guò)“function deleteRow(_this){...}”方法實(shí)現(xiàn)刪除行的功能即可。

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版，DELL G3電腦

javascript中table怎么刪除行？

JavaScript為table動(dòng)態(tài)添加、刪除行

我一共寫(xiě)了三種方法來(lái)實(shí)現(xiàn)添加行的功能，寫(xiě)了一種方法來(lái)實(shí)現(xiàn)刪除行的功能，主要感覺(jué)是一定要熟悉JavaScript的API，其實(shí)這些東西API文檔里面都有，就看你是否知道JavaScript中有這個(gè)函數(shù)或?qū)傩?，然后把這些屬性和函數(shù)整合起來(lái)就是你想要的東西。

所有HTML元素都能用的常用函數(shù)：node.appendChild(node)、

所有HTML元素都能用的常用屬性：element.tagName

document對(duì)象的常用方法：document.createElement(name)

< table>中的常用函數(shù)：tableObject.insertRow(index)、tableObject.deleteRow(index)

< table>中的常用屬性：tableObject.rows、tableObject.rows.length

< tr >中的常用函數(shù)：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等于表中的行數(shù)，則新行將被附加到表的末尾。
        //返回一個(gè)TableRow，表示新插入的行。
        var tableRow = userInfo.insertRow(rowLength);
        tableRow.innerHTML = "李四102四海刪除";
    }
    function addRow3(){
        var userInfo = document.getElementById("userInfo");
        //計(jì)算rows.length時(shí)會(huì)把表頭包含在內(nèi)
        var rowLength = userInfo.rows.length;
        var tableRow = userInfo.insertRow(rowLength);
        //新單元格將被插入當(dāng)前位于 index 指定位置的表元之前
        //如果 index 等于行中的單元格數(shù)，則新單元格被附加在行的末尾。
        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 = "刪除";
    }
    //不能傳初始化時(shí)當(dāng)前元素所在行的rowIndex，因?yàn)閯h除操作之后當(dāng)前元素所在行的rowIndex會(huì)發(fā)送變化
    function deleteRow(_this){
        var userInfo = document.getElementById("userInfo");
        var rowIndex = getTrIndex(_this);
        //deleteRow() 方法用于從表格刪除指定位置的行
        //參數(shù) index 指定了要?jiǎng)h除的行在表中的位置
        userInfo.deleteRow(rowIndex);
    }
    function getTrIndex(element){
        if(element.tagName.toLowerCase() == "tr"){
            //rowIndex屬性返回某一行在表格的行集合中的位置（row index）
            return element.rowIndex;
        }else{
            return getTrIndex(element.parentNode);
        }
    }

“javascript中的table如何刪除行”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！