動態表 HTML，添加和刪除

Question

我目前正在 html 中開發一個表，用於數據處理，其中值通過該表傳遞到數據庫。 因此，表需要是動態的。 我能夠在表格中開發附加部分，但我已經嘗試從表格中刪除一行超過一天了，我能做的最多就是刪除“頭”，目標是在每一行中增加一個單元格創建刪除行本身。 代碼目前是這樣的。

HTML：

<table border="4">
            <thead>
                <tr>
                    <th>Exercicio</th>
                    <td><input type="text" name="userExercise" id="userExercise"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Membro</th>
                    <td><input type="text" name="userMember" id="userMember"></td>
                </tr>
                <tr>
                    <th>Repetições</th>
                    <td><input type="text" name="userRep" id="userRep"></td>
                </tr>
              
                
                
                <tr id="btna">
                    <td colspan="2"><input type="button" name="button" id="btn" value="Add" onclick="AddRow()"></td>
                </tr>
            </tbody>
        </table>

        <table border="4" id="show">
            <thead>
                <tr>
                    <th>Exercício</th>
                    <th>Membro</th>
                    <th>Repetições</th>
                    <th>Deletar</th>
                
                </tr>
            </thead>
        </table>

javascript：

var list1 = [];

var list2 = [];

var list3 = [];

var list4 = [];

        var n = 1;
        var x = 0;

        function AddRow(){

            var AddRown = document.getElementById('show');
            var NewRow = AddRown.insertRow(n);

            list1[x] = document.getElementById("userExercise").value;
            list2[x] = document.getElementById("userMember").value;
            list3[x] = document.getElementById("userRep").value;
            list4[x] = "Deleta"

            

            var cel1 = NewRow.insertCell(0);
            var cel2 = NewRow.insertCell(1);
            var cel3 = NewRow.insertCell(2);
            var cel4 = NewRow.insertCell(3);

    

            cel1.innerHTML = list1[x];
            cel2.innerHTML = list2[x];
            cel3.innerHTML = list3[x];
            cel4.innerHTML = list4[x];
            
            console.log(show.rows.length)
    

            n++;
            x++;
        }

      

            var index, table = document.getElementById('show');
            for(var i = 1; i < table.rows.length; i++)
            {
                table.rows[i].cells[3].onclick = function()
                {
                    var c = confirm("do you want to delete this row");
                    if(c === true)
                    {
                        index = this.parentElement.rowIndex;
                        table.deleteRow(index);
                    }
                    
                    console.log(index);
                };
                
            }
    

好吧，當我單擊“刪除”時，什么也沒有發生，當我更改 for (var i = 1; i <table.rows.length; i ++) 中的“i”的初始值以嘗試刪除 header 時， function 有效，有人能提示我哪里可能出錯了嗎？

我在帖子中添加了一張圖片以幫助查看

我的代碼的結果

Answer 1

這是一個工作版本。

我刪除了第二個for循環，並將onclick設置為刪除插入新行。

您的版本的問題是設置onclick的第二個for循環僅在頁面加載時發生，並且在該階段只有表 header。 通過將onclick放入AddRow function，根據需要每次應用。

 var list1 = []; var list2 = []; var list3 = []; var list4 = []; var n = 1; var x = 0; function AddRow(){ var AddRown = document.getElementById('show'); var NewRow = AddRown.insertRow(n); list1[x] = document.getElementById("userExercise").value; list2[x] = document.getElementById("userMember").value; list3[x] = document.getElementById("userRep").value; list4[x] = "Deleta" var cel1 = NewRow.insertCell(0); var cel2 = NewRow.insertCell(1); var cel3 = NewRow.insertCell(2); var cel4 = NewRow.insertCell(3); cel1.innerHTML = list1[x]; cel2.innerHTML = list2[x]; cel3.innerHTML = list3[x]; cel4.innerHTML = list4[x]; cel4.onclick = function() { var c = confirm("do you want to delete this row"); if(c === true) { index = this.parentElement.rowIndex; var AddRown = document.getElementById('show'); AddRown.deleteRow(index); n--; x--; } console.log(index); }; console.log(show.rows.length) n++; x++; }

 <table border="4"> <thead> <tr> <th>Exercicio</th> <td><input type="text" name="userExercise" id="userExercise"></td> </tr> </thead> <tbody> <tr> <th>Membro</th> <td><input type="text" name="userMember" id="userMember"></td> </tr> <tr> <th>Repetições</th> <td><input type="text" name="userRep" id="userRep"></td> </tr> <tr id="btna"> <td colspan="2"><input type="button" name="button" id="btn" value="Add" onclick="AddRow()"></td> </tr> </tbody> </table> <table border="4" id="show"> <thead> <tr> <th>Exercício</th> <th>Membro</th> <th>Repetições</th> <th>Deletar</th> </tr> </thead> </table>