javascript - 动态表格 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”的初始值以尝试删除标题时，功能有效，有人能提示我哪里可能出错了吗？

我在帖子中添加了一张图片以帮助查看

我的代码的结果

标签： javascripthtmlhtml-table

Answer 1

Here is a working version.

I removed the 2nd for loop and included setting the onclick to the delete into the insert of a new row.

The issue with your version, is the 2nd for loop that sets the onclick only happens on page load and at that stage there is only the table header. By putting the onclick into the AddRow function, it is applied each time, as necessary.

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>