如何从通过行内的按钮动态生成的表中复制行？

Question

我希望你有一个美好的一天，我有以下代码，从数据库查询的结果动态生成一个表，基本上是一个产品列表：$(".outer_div").append(    '<div class="table-responsive"><table id= "r_table" class = "table table-checkable dataTable no-footer "></table></div class="table-responsive">'  );  let table = $("#r_table");  let secRow = $(document.createElement("tr"));  for (let i = 0; i < 5; i++) {    if (i == 0) {      let cellHead = $(document.createElement("th"));      secRow.append(cellHead.text("Código"));      table.append(secRow);    } else if (i == 1) {      let cellHead = $(document.createElement("th"));      secRow.append(cellHead.text("Proveedor"));      table.append(secRow);    } else if (i == 2) {      let cellHead = $(document.createElement("th"));      secRow.append(cellHead.text("Producto"));      table.append(secRow);    } else if (i == 3) {      let cellHead = $(document.createElement("th"));      secRow.append(cellHead.text("Precio"));      table.append(secRow);    } else if (i == 4) {      let cellHead = $(document.createElement("th"));      secRow.append(cellHead.text("Acciones"));      table.append(secRow);    }  }  $.each(datos, (index, value) => {    let row = $(document.createElement("tr")).attr(      "id",      value["id"] + "row"    );    let secRow = $(document.createElement("tr"));    for (let prop in value) {      let cell = $(document.createElement("td")).attr(        "id",        value["id"] + "menu"      );      $("th").css("background-color", "#1bc5bd");      cell.text(value[prop]);      row.append(cell);    }    row.append(      //Boton de agregar      '<td><center><button onclick="cloneRow(\"'+'1row'+'\")"  class="envio btn btn-link-success"><i class="glyphicon glyphicon-plus"></i></button></center></td>'    );    table.append(row);  });但是我想实现这一点，在操作列中每行生成的按钮中，当我单击它时，复制整行的数据并将其保存到必须以另一种形式生成的另一个表中，然后通过ajax将其发送到另一个部分。在这里，我留下了使用按钮动态生成的表格的图像图像这将是通过单击特定行的按钮指定相关行的表<table id="results"></table>

Answer 1

我建议把这个问题看成是潜在的相关问题。它使用jQuery从表中获取特定值，当然请记住，索引以0开头。将值更改为更独特的值，看看它是如何工作的！

Answer 2

您可以将用于克隆的事件处理程序直接附加到表中。这样：

$('#myProductsTable').on('click', 'button', function() { // do sth });

这样，同一个按钮可以在结果表中以不同的行为“重用”：

$('#myResultsTable').on('click', 'button', function() { // do sth different});

沃克林示例：

for(var i = 1; i < 10; i ++) {

  let $row = $('<tr><td>ROW '+i+'</td><td><button>add '+i+'</button></td></tr>');

  $('#products tbody').append($row);

}

$('#products').on('click', 'button', function() {

  let $row = $(this).closest('tr').clone();

  $row.find('button').text('remove');

  $('#results').append( $row );

});

$('#results').on('click', 'button', function() {

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

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="products">

<thead><tr><th>my Products</th></tr></thead>

<tbody></tbody>

</table>

<hr>

<table id="results">

<thead><tr><th>my Results</th></tr></thead>

<tbody></tbody>

</table>