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

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',&nbsp;'button',&nbsp;function()&nbsp;{&nbsp;//&nbsp;do&nbsp;sth&nbsp;});这样，同一个按钮可以在结果表中以不同的行为“重用”：$('#myResultsTable').on('click',&nbsp;'button',&nbsp;function()&nbsp;{&nbsp;//&nbsp;do&nbsp;sth&nbsp;different});沃克林示例：for(var i = 1; i < 10; i ++) {&nbsp; let $row = $('<tr><td>ROW '+i+'</td><td><button>add '+i+'</button></td></tr>');&nbsp; $('#products tbody').append($row);}$('#products').on('click', 'button', function() {&nbsp; let $row = $(this).closest('tr').clone();&nbsp; $row.find('button').text('remove');&nbsp; $('#results').append( $row );});$('#results').on('click', 'button', function() {&nbsp; $(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>