Question

我可以从我的表中删除选定的行，但是在删除后尝试添加新行时遇到了一些问题。在添加之前，我必须在我的添加行按钮上按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>

Answer 1

如果您通过了已点击delrow()方法的按钮，则只需删除其tr的父级即可删除该行

＆＃13;

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++;
}

＆＃13;

#del
{
  margin-left:10px;
}

＆＃13;

<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>

＆＃13;

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

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

1 个答案: