时间戳

首页 > 解决方案 > 在同一类别下添加行

html - 在同一类别下添加行

问题描述

我正在尝试根据另一个表中的值创建一个表，因此如果我从表 1 中选择一个项目，它将在表 2 中创建一个新项目行，并且这些项目将被排序，并且同一类别中的每个项目都将列在此类别的标题。这是结果的图片：桌子

这是示例代码。

$("#table tr").click(function(){
     
   var row=$('<tr><td><td></tr>>') 
   row.appendTo('#add')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>Add item</h1>

<table id="table">
  <tr>
    <th>item</th>
    <th>Qty</th>
  </tr>
  <tr>
    <td colspan="2">Class A</td>
  </tr>
  <tr class="A">
    <td id="1">A1</td>
    <td id="2">1</td>
  </tr>
  <tr class="A">
    <td>A3</td>
    <td>4</td>
  </tr>

  <tr>
    <td colspan="2">Class B</td>
  </tr>
  <tr class="B">
    <td>B1</td>
    <td>2</td>
  </tr>
  <tr class="B">
    <td>B3</td>
    <td>4</td>
  </tr>
  <tr class="B">
    <td>B1</td>
    <td>2</td>
  </tr>
  <tr class="B">
    <td>B3</td>
    <td>4</td>
  </tr>
</table>
<div>

</div>
<div>

</div>
<br>
 <table id="add">
 <tr>
    <th>item</th>
    <th>Qty</th>
  </tr>
   <tr>
    <td colspan="2">Class A</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>4</td>
  </tr>

  <tr>
    <td colspan="2">Class B</td>
  </tr>
  <tr>
    <td>B2</td>
    <td>3</td>
  </tr>
   <tr>
    <td>B3</td>
    <td>2</td>
  </tr>
  </table>
</body>
</html>

标签： htmljqueryhtml-table

解决方案

实现此目的的一种方法是data在源表和目标表的每一行上使用属性。通过这种方式，您可以确定源行来自哪个组，以便您可以将其放在目标表中的同一组中。

另请注意，我.copyable-row为每个tr允许克隆到第二个表的类添加了一个 , 。您当前的逻辑允许复制表头本身。

let $dest = $('#add');

$("#table tr.copyable-row").click(e => {
  let $tr = $(e.currentTarget);
  let group = $tr.data('group');
  let $target = $dest.find(`tr[data-group="${group}"]:last`);
  $tr.clone().insertAfter($target);
});
table { 
  margin: 0 0 10px;
}


table,
th,
td {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <th>item</th>
    <th>Qty</th>
  </tr>
  <tr>
    <td colspan="2">Class A</td>
  </tr>
  <tr class="copyable-row" data-group="a">
    <td>A1</td>
    <td>1</td>
  </tr>
  <tr class="copyable-row" data-group="a">
    <td>A3</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="2">Class B</td>
  </tr>
  <tr class="copyable-row" data-group="b">
    <td>B1</td>
    <td>2</td>
  </tr>
  <tr class="copyable-row" data-group="b">
    <td>B3</td>
    <td>4</td>
  </tr>
  <tr class="copyable-row" data-group="b">
    <td>B1</td>
    <td>2</td>
  </tr>
  <tr class="copyable-row" data-group="b">
    <td>B3</td>
    <td>4</td>
  </tr>
</table>


<table id="add">
  <tr>
    <th>item</th>
    <th>Qty</th>
  </tr>
  <tr data-group="a">
    <td colspan="2">Class A</td>
  </tr>
  <tr data-group="a">
    <td>A1</td>
    <td>4</td>
  </tr>

  <tr data-group="b">
    <td colspan="2">Class B</td>
  </tr>
  <tr data-group="b">
    <td>B2</td>
    <td>3</td>
  </tr>
  <tr data-group="b">
    <td>B3</td>
    <td>2</td>
  </tr>
</table>

推荐阅读