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

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>