动态表格 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

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

Result of my code

Answer 1

这是一个工作版本。

我删除了第二个for 循环并将onclick 设置为删除插入新行。

您的版本的问题是第二个for 循环设置onclick 仅在页面加载时发生，并且在那个阶段只有表格标题。通过将onclick 放入AddRow 函数中，每次都会根据需要应用它。

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>