如何使用Javascript删除表格行答案

【问题标题】：How to delete table row using Javascript如何使用Javascript删除表格行
【发布时间】：2017-06-13 04:56:54
【问题描述】：

我已经使用 Javascript function addRow(id) 创建了新行，但我无法删除它。当我单击删除按钮时，没有任何反应。我究竟做错了什么？我很感激任何建议。

<table>
<tr>
   somethingElse
</tr>
<tr>
    <td colspan="5">
        <script type="text/javascript">
           var inputCount = 0;

            function addRow(id) {
                //set row number
                inputCount++;
                var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
                var row = document.createElement("TR");

                var td1 = document.createElement("TD");
                var td2 = document.createElement("TD");
                var td3 = document.createElement("TD");
                var td4 = document.createElement("TD");
                var td5 = document.createElement("TD");

                var t1 = document.createElement('div');
                var t2 = document.createElement('div');
                var t3 = document.createElement('div');
                var t4 = document.createElement('div');
                var t5 = document.createElement('div');

                t1.innerHTML = "Name of school: ";
                t2.innerHTML = "<input type='text' Width='180px' name='items_" + inputCount + "'>";
                t3.innerHTML = "Title aquired: ";
                t4.innerHTML = "<input type='text' Width='180px' name='value_" + inputCount + "'>";
                t5.innerHTML = "<input type='Button' class='Button' onclick='deleteLine(this)' value='Remove'>";

                td1.appendChild(t1)
                td2.appendChild(t2)
                td3.appendChild(t3)
                td4.appendChild(t4)
                td5.appendChild(t5)

                row.appendChild(td1);
                row.appendChild(td2);
                row.appendChild(td3);
                row.appendChild(td4);
                row.appendChild(td5);

                tbody.appendChild(row);
            }

            function deleteLine(object) {
                var table = document.getElementsByTagName("myTable")[0];
                var tBody = table.getElementsByTagName("tbody")[0];
                var rows = tBody.getElementsByTagName("tr");

                while (object.tagName != 'TR') {
                    object = object.parentNode;
                }
                var row = rows[object.rowIndex];

                tBody.removeChild(row);
            }
        </script>
        <table id="myTable">
            <tr>
                <td align=right>
                    Name of school:
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Width="180px"></asp:TextBox>
                </td>
                <td align=right>
                    Title aquired:
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Width="180px"></asp:TextBox>
                </td>
                <td>
                    <a href="javascript:addRow('myTable')">Add more education</a>
                </td>                                        
            </tr>
        </table>                                
    </td>
</tr>
<tr>
   somethingElse
</tr>
</table>

【问题讨论】：

您能否更新您的问题并将您的代码标记为代码以便可读？
我实际上没有在您的代码中看到任何删除按钮？只是一个添加按钮。

标签： javascript html asp-classic html-table

【解决方案1】：

我猜这个

var table = document.getElementsByTagName("myTable")[0];

最好是

var table = document.getElementById("myTable");

如果您愿意，可以使函数更简单：

function deleteLine(object) {
            while (object.tagName != 'TR') {
                object = object.parentNode;
            }
            object.parentNode.removeChild(object);
        }

【讨论】：

【解决方案2】：

你也可以试试这个。 ...

<script type="text/javascript">
           var inputCount = 0;

            function addRow(id) {
                //set row number
                inputCount++;
                var tbody = document.getElementById(id);
                html=""
                  var row = document.createElement("TR");
                  row.setAttribute("id", "row"+inputCount)
                  tbody.appendChild(row);
                html +="<td>Name of school:</td>"
                html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>"
                html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>"
                html +="<td>Title aquired: </td>"
                html +="<td><input type='Button' class='Button' onclick=deleteLine('row"+inputCount+"') value='Remove'></td>"
                alert(html)
                row.innerHTML = html




            }

            function deleteLine(index) {
                table = document.getElementById("myTable")
             row = document.getElementById(index)

                table.removeChild(row);
            }
        </script>

【讨论】：