使用javascript从表中动态删除一行答案

【问题标题】：To delete a row dynamically from a table using javascript使用javascript从表中动态删除一行
【发布时间】：2016-09-27 23:35:51
【问题描述】：

单击删除行按钮时，我需要帮助从表格底部逐一删除行。

问题：

我使用 javascript 函数从表中删除了一行，而不是从底部逐行删除，除了前 2 行之外，它被整体删除。单击删除按钮时，除了前2行之外，我需要从底部逐行删除。

这是我的代码

<html>
<head>
<script type="text/javascript">

        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;

                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }

        function deleteRow(tableID) {

            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=1; i<rowCount; i++) {
                var row = table.rows[i];
                    if(rowCount <= 2) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            catch(e) {
                alert(e);
            }
        }
    </script>

</head>

<body>
<form>

      <input type="button" value="Add Row" onclick="addRow('dataTable')" />

    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

    <br/>
    <br/>

     <table id="dataTable" align="center" width="350px" border="1">

   <tr>
         <th> Product Name</th>
          <th>Quantity</th>
         <th> Brand</th>       

    </tr>

    <tr>

   <td> <input type="text" name="pname"/></td> &nbsp;
   <td><input type="text" name="qty"/></td>
    <td><select name="brand"/>
    <option value="select">SELECT</option>
  </select>
    </td>



  </table>
</form>
</body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

这对你有帮助：

function deleteRow(tableID) {

    try {

       var table = document.getElementById(tableID);

       var rowDelete = table.rows.length - 1;

       if (rowDelete > 1)

           table.deleteRow(rowDelete);

       else

         alert("Cannot delete all the rows.")
    }

    catch(e) {

        alert(e);
    }
}

最终代码：

<html>
<head>
<script type="text/javascript">

        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;

                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }

       function deleteRow(tableID) {

        try {

           var table = document.getElementById(tableID);

           var rowDelete = table.rows.length - 1;

           if (rowDelete > 1)

               table.deleteRow(rowDelete);

           else

             alert("Cannot delete all the rows.")
        }

        catch(e) {

            alert(e);
        }
    }
    </script>

</head>

<body>
<form>

      <input type="button" value="Add Row" onclick="addRow('dataTable')" />

    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

    <br/>
    <br/>

     <table id="dataTable" align="center" width="350px" border="1">

   <tr>
         <th> Product Name</th>
          <th>Quantity</th>
         <th> Brand</th>       

    </tr>

    <tr>

   <td> <input type="text" name="pname" value="" /></td> &nbsp;
   <td><input type="text" name="qty" value=""/></td>
    <td><select name="brand"/>
        <select>
           <option value="select">SELECT</option>

       </select>
    </td>
  </table>
</form>
</body>
</html>

【讨论】：

【解决方案2】：

在进入循环删除行之前，您应该首先检查行数。或者您可以删除循环，因为您只删除最后一行 (rowCount-1);

试试这个：

function deleteRow(tableID) {

            try {
                    var table = document.getElementById(tableID);
                    var rowCount = table.rows.length;

                    if (rowCount > 2){

                        //for(var i =1; i < 2; i++) {
                        //  var row = table.rows[i];
                              table.deleteRow(rowCount-1);

                         //}
                    }
                    else{
                     alert("Cannot delete all the rows.");
                    }

             }
             catch(e) {
                alert(e);
             }
}

【讨论】：

【解决方案3】：

这是工作代码，你没有在删除一行后中断执行，这就是它删除所有行的原因

function deleteRow(tableID) {

            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=1; i<rowCount; i++) {
                var row = table.rows[i];
                    if(rowCount <= 2) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    else{
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                        break;
                    }
                }


            }
            catch(e) {
                alert(e);
            }
        }

【讨论】：

【解决方案4】：

看看这是否有帮助：

$('#tbl1').on('click', 'input[type="button"]', function () {
    $(this).closest('tr').remove();
})

$('p input[type="button"]').click(function () {
    $('#tbl1').append('<tr><td><input type="text" class="txtBox" /></td><td><input type="button" value="X" /></td></tr>')
});

这里有一些可以使用 HTML 片段的东西

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbl1" style="border: 1px solid blue">
    <tr>
        <td>
            <input type="text" class="txtBox" />
        </td>
        <td>
            <input type="button" value="X" />
        </td>
    </tr>
</table>
<p>
    <input type="button" value="Add">
</p>

【讨论】：