从 HTML 表中删除选定的行，并在其后添加新行答案

【问题标题】：Delete selected rows from HTML table, and adding new rows after it从 HTML 表中删除选定的行，并在其后添加新行
【发布时间】：2015-10-13 00:28:47
【问题描述】：

我可以从表中删除选定的行，但是在删除后尝试添加新行时遇到了一些问题。在添加之前，我必须在我的添加行按钮上按 2 次。

请帮助我。谢谢

我的代码

<div class="container" id="TransactionInternalBlock">
  <div class="row">
    <table class="table table-bordered table-hover" id="table_logic" >
      <thead>
      <tr >
        <th class="text-center">
          #
        </th>
        <th class="text-center">
          Product Name
        </th>
        <th class="text-center">
          Price
        </th>
        <th class="text-center">
          Quantity
        </th>
      </tr>
      </thead>
      <tbody>
      <tr id='addr0'></tr>
      </tbody>
    </table>
  </div>
  <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
<script>
    var i = 0;
    var Mainarray = [];
    $("#add_row").click(function () {
        addrow();
    });

    $("#delete_row").click(function(){
        if(i>=0){
            $("#addr"+(i-1)).html('');
            if(i > 0)
            {
                i--;
            }
        }
    });
    function delrow()
    {
        if(i>=0){
           document.getElementById("table_logic").deleteRow(2);
            if(i > 0)
            {
                i--;
            }
        }
    }
    function addrow(prodname,prodprice)
    {
        $('#addr' + i).html("<td>" + (i + 1) + "</td><td>" + "Choco" + "</td><td>$ " + "5.50" + "</td><td> 1 <button id=del onclick=delrow()>DELETE</button></td>");
        $('#table_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
        i++;
    }
</script>
<style type="text/css">
    #del
    {
        margin-left:10px;
    }
</style>

【问题讨论】：

标签： javascript html

【解决方案1】：

如果您将单击的按钮传递给 delrow() 方法，您只需删除它的父 tr 即可删除该行

var Mainarray = [];
var i = 0;
$("#add_row").click(function () {
  addrow();
});
    
$("#delete_row").click(function(){
   if(i>=0){
    $("#addr"+(i-1)).html('');
    if(i > 0)
    {
      i--;
    }
  }
});
function delrow(sender)
{
  $(sender).parent().parent().remove();
}
function addrow(prodname,prodprice)
{
  $('#addr' + i).html("<td>" + (i + 1) + "</td><td>" + "Choco" + "</td><td>$ " + "5.50" + "</td><td> 1 <button id=del onclick=delrow(this)>DELETE</button></td>");
  $('#table_logic>tbody').append('<tr id="addr' + (i + 1) + '"></tr>');
  i++;
}

#del
{
  margin-left:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="TransactionInternalBlock">
  <div class="row">
    <table class="table table-bordered table-hover" id="table_logic" >
      <thead>
        <tr >
          <th class="text-center">
            #
          </th>
          <th class="text-center">
            Product Name
          </th>
          <th class="text-center">
            Price
          </th>
          <th class="text-center">
            Quantity
          </th>
        </tr>
      </thead>
      <tbody>
        <tr id='addr0'></tr>
      </tbody>
    </table>
  </div>
  <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

另一个建议是将新行直接附加到正文中，而不是创建一个空行并在下次单击添加行时填充它

【讨论】：