文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从通过行中的按钮动态生成的表中复制行？

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

Stack Overflow用户

提问于 2020-05-20 22:17:08

回答 2查看 37关注 0票数 1

我希望你有一个美好的一天，我有以下代码，从数据库查询的结果动态生成表，基本上它是一个产品列表：

$(".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);

  });

但我想实现的是，在actions列的每一行中生成的按钮中，当我单击它时，复制整行的数据并将其保存到另一个表中，该表必须以另一种形式生成，然后通过ajax发送到另一部分。

在这里，我留下了使用按钮动态生成的表的图像

image

这将是通过单击特定行的按钮来指定相关行的表

<table id="results"></table>

html

jquery

dom

javascript

回答 2

Stack Overflow用户

发布于 2020-05-20 22:22:16

我建议将此question视为潜在相关。它使用jQuery从表中获取特定值，当然要记住索引从0开始。将值更改为更独特的值，看看它是如何工作的！

票数 0

Stack Overflow用户

发布于 2020-05-20 22:51:13

您可以将用于克隆的事件处理程序直接附加到表。如下所示：

$('#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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61915425

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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