Question

我想克隆表tr并将新的btn添加到类{rooms_btns“的td中。

我该怎么做？

$(".add_room_btn").on('click', function() {
  new_row_content = $("#clone_row").clone();
  new_row_content.removeAttr('id');
  new_row_content.append().append("<a href='#'><i class='fa fa-minus-circle fa-2x text-danger'></i></a>").insertAfter("#clone_row");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<table>
  <tr id="clone_row">
    <td>
      <select name="" class="form-control">
        <option value="">STANDART</option>
      </select>
    </td>
    <td class="rooms_btns">
      <a href="#">
        <i class="fa fa-plus-circle fa-2x text-success add_room_btn"></i>
      </a>
    </td>
  </tr>
</table>

Answer 1

尝试将jquery更改为此。

$(".add_room_btn").on('click', function() {
  new_row_content = $("#clone_row").clone();
  new_row_content.removeAttr('id');
  new_row_content.find('.rooms_btns').append("<a href='#'><i class='fa fa-minus-circle fa-2x text-danger'></i></a>");
  new_row_content.insertAfter("#clone_row");
});

然后您可以将点击处理程序更改为此 $(document).on('click', ".add_room_btn", function() { 这样所有动态添加的+按钮都可以使用。

Answer 2

Working fiddle 。

您需要将克隆的tr附加到表中：

$('table').append(new_row_content);

注意：

删除以下附加内容：

new_row_content.append().append("<a href='#' class='remove_room_btn'><i class='fa fa-minus-circle fa-2x text-danger'></i></a>").insertAfter("#clone_row");
_______________^^^^^^^^^

应该是：

new_row_content.append("<a href='#' class='remove_room_btn'><i class='fa fa-minus-circle fa-2x text-danger'></i></a>").insertAfter("#clone_row");

Answer 3

要附加到克隆行中的.rooms_btns单元格，您需要先选择它，然后再调用append()。为此，您可以使用find()：

$(".add_room_btn").on('click', function() {
  var $new_row_content = $("#clone_row").clone();
  $new_row_content.removeAttr('id');
  $new_row_content.find('td.rooms_btns').append("<a href='#'><i class='fa fa-minus-circle fa-2x text-danger'></i></a>");
  $new_row_content.insertAfter("#clone_row");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<table>
  <tr id="clone_row">
    <td>
      <select name="" class="form-control">
        <option value="">STANDART</option>
      </select>
    </td>
    <td class="rooms_btns">
      <a href="#"><i class="fa fa-plus-circle fa-2x text-success add_room_btn"></i></a>
    </td>
  </tr>
</table>

在克隆表tr之后添加btn

3 个答案: