使用jquery添加，删除表中的行

时间：2017-02-28 09:30:12

标签： javascript jquery twitter-bootstrap

根据我的代码我有2个表。点击“添加”后，整行将附加到下一个表格，点击“删除”后，它将附加到第一个表格。

我写的代码工作得很好，但是我添加所有行或多次删除所有行都有一个奇怪的错误，因为它会停止工作。我无法弄清楚这个问题。

$(".addRow").on("click", function() {
  var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>';
  var $clone = $(this).parent().parent();
  $clone.find(".addRow").remove();
  $clone.find("td:eq(0)").append($delete);
  $(".selected table").append($clone);
  $(".deleteRow").on("click", function() {
    var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>';
    var newClone = $(this).parent().parent();
    newClone.find(".deleteRow").remove();
    newClone.find("td:eq(0)").append($add);
    $(".available table").append(newClone);
  });
});

$(".deleteRow").on("click", function() {
  var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>';
  var newClone = $(this).parent().parent();
  newClone.find(".deleteRow").remove();
  newClone.find("td:eq(0)").append($add);
  $(".available table").append(newClone);
  $(".addRow").on("click", function() {
    var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>';
    var $clone = $(this).parent().parent();
    $clone.find(".addRow").remove();
    $clone.find("td:eq(0)").append($delete);
    $(".selected table").append($clone);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available">
    <label>Available Members</label>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Cab Swift Two</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Dharma</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Sahoo</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Majhi</h6>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-lg-4 col-md-4 selected">
    <label>Selected Members</label>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Shantanu</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Android</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>ios</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Windows</h6>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

这是工作fiddle

2 个答案:

答案 0 :(得分：6)

将事件绑定到文档而不是表行，因为删除元素后，绑定事件也会被删除。

$(document).on('click','.addRow'

参考更新后的fiddle

答案 1 :(得分：1)

问题是因为您正在动态修改元素，因此您需要使用委托事件处理程序来绑定它们的事件：

$('.row').on('click', '.addRow', fn);
$('.row').on('click', '.deleteRow', fn);

试试这个：

$(".row").on("click", '.addRow', function() {
  var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>';
  var $clone = $(this).parent().parent();
  $clone.find(".addRow").remove();
  $clone.find("td:eq(0)").append($delete);
  $(".selected table").append($clone);
  $(".deleteRow").on("click", function() {
    var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>';
    var newClone = $(this).parent().parent();
    newClone.find(".deleteRow").remove();
    newClone.find("td:eq(0)").append($add);
    $(".available table").append(newClone);
  });
});

$(".row").on("click", '.deleteRow', function() {
  var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>';
  var newClone = $(this).parent().parent();
  newClone.find(".deleteRow").remove();
  newClone.find("td:eq(0)").append($add);
  $(".available table").append(newClone);
  $(".addRow").on("click", function() {
    var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>';
    var $clone = $(this).parent().parent();
    $clone.find(".addRow").remove();
    $clone.find("td:eq(0)").append($delete);
    $(".selected table").append($clone);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available">
    <label>Available Members</label>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Cab Swift Two</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Dharma</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Sahoo</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Majhi</h6>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-lg-4 col-md-4 selected">
    <label>Selected Members</label>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Shantanu</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Android</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>ios</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Windows</h6>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

相关问题
最新问题