Question

我可以克隆第一行和最后一行，但是我不能克隆2、3、4等行，所以我该如何定位该行分别克隆和擦除它们。

现在我必须写垃圾，这样我才能发布帖子，因为我的代码太多了，真的，伙计们，这不是esayflow，而是XD

$('button[name=add]').on('click', function() {
  var cloned = $('#table1 tr:last').clone(true);

  $('#table1').append(cloned);
})

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tbody>
    <tr id="2">
      <td>2</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">a</option>
          <option value="">b</option>
          <option value="">c</option>
          <option value="">d</option>
          <option value="">e</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">4</option>
          <option value="">5</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
  </tbody>
</table>

Answer 1

如果克隆无法正常工作，请使用“ outerHTML”并将其附加到最近的“ tbody”。

如下：

$('button[name=add]').on('click', function() {

  var cloned = $(this).closest('tr')[0].outerHTML;

  $(this).closest('tbody').append(cloned);

});

要删除行：

$('button[name=minus]').on('click', function() {

  $(this).closest('tr').remove();

});

Answer 2

您需要克隆具有单击按钮的tr。在您的代码中，您仅指定要克隆的最后一行。

因此，要克隆其他任何行，请以包含使用jQuery .closest()单击的按钮的行为目标

$('button[name=add]').on('click', function() {
  // this will select the first tr parent that contain the button
  var cloned = $(this).closest('tr').clone(true);

  $('#table1').append(cloned);
})

Answer 3

使用closest()克隆并删除最接近的tr。

$('button[name=add]').on('click', function() {
  var cloned = $(this).closest('tr').clone(true);
  $('#table1 tbody tr:last').after(cloned);
})
$('button[name=erase]').on('click', function() {
  $(this).closest("tr").remove();
})

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tbody>
    <tr id="2">
      <td class="count">1</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">a</option>
          <option value="">b</option>
          <option value="">c</option>
          <option value="">d</option>
          <option value="">e</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
  </tbody>
</table>

Answer 4

使用remove（）函数删除目标。

$('button[name=add]').on('click', function() {
  var cloned = $(this).closest('tr').clone(true);

  $('#table1').append(cloned);
})
$('button[name=erase]').on('click', function() {

  $(this).closest('tr').remove();

});

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  </thead>
  <tbody>
    <tr id="2">
      <td>2</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">a</option>
          <option value="">b</option>
          <option value="">c</option>
          <option value="">d</option>
          <option value="">e</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <select name="numero" id="" class="form-control">
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">4</option>
          <option value="">5</option>
          <option value="">...</option>
        </select>
        <button name="add">+</button>
        <button name="erase">-</button>
      </td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
      <td><input type="number" min="0" class="form-control"></td>
    </tr>
  </tbody>
</table>

我如何克隆和删除每一行中的一行

4 个答案: