Comment supprimer des lignes d'un tableau en javascript

Comment implémenter la suppression de lignes dans un tableau en javascript : créez d'abord un exemple de fichier HTML ; puis définissez un tableau ; enfin utilisez la méthode "function deleteRow(_this){...}" pour implémenter la fonction de suppression. lignes.

L'environnement d'exploitation de cet article : système Windows7, javascript version 1.8.5, ordinateur DELL G3

Comment supprimer des lignes dans le tableau en javascript ?

JavaScript ajoute et supprime dynamiquement des lignes pour la table

J'ai écrit un total de trois méthodes pour implémenter la fonction d'ajout de lignes et une méthode pour implémenter la fonction de suppression de lignes .Principalement, vous avez l'impression que vous devez être familier avec les API JavaScript. En fait, ces éléments sont inclus dans les documents API. Cela dépend si vous savez qu'il existe des fonctions ou des propriétés en JavaScript, puis l'intégration de ces propriétés et fonctions vous donnera. ce que tu veux.

Fonctions communes pouvant être utilisées par tous les éléments HTML : node.appendChild(node),

Attributs communs pouvant être utilisés par tous les éléments HTML : element.tagName

objet document Méthodes couramment utilisées : document.createElement(name)

43c4707103c6cc3650c2aeb71d2b1e8d Fonctions couramment utilisées dans : tableObject.insertRow(index), tableObject.deleteRow(index)

< Propriétés couramment utilisées : tableObject.rows, tableObject.rows.length

< Fonctions couramment utilisées : tablerowObject.insertCell(index)

< 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=&#39;delete(this)&#39;>删除</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=&#39;deleteRow(this)&#39;>删除</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=&#39;deleteRow(this)&#39;>删除</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>

Étude recommandée : "Javascript Advanced Tutorial"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!