代码之家 › 专栏 › 技术社区 › Jadasdas

将表javascript中的产品分组[关闭]

jquery javascript

Jadasdas · 技术社区 · 6 年前

我有桌子:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<table class="table-bordered" width="100%">

<tr>

<th>Product</th>
<th>Cnt</th>

</tr>
<tr>
<td>Product 1</td>
<td>8</td>
</tr>
<tr>
<td>Product 2</td>
<td>11</td>
</tr>
<tr>
<td>Product 1</td>
<td>8</td>
</tr>
<tr>
<td>Product 1</td>
<td>8</td>
</tr>
<tr>
<tr>
</table>

我需要:删除重复的产品,并加上它的数量。我该怎么做? 我认为,这需要javascript或jquery,但我如何删除重复项并将cnt写入其他产品?

我需要这个结果表:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<table class="table-bordered" width="100%">

<tr>

<th>Product</th>
<th>Cnt</th>

</tr>
<tr>
<td>Product 1</td>
<td>24</td>
</tr>
<tr>
<td>Product 2</td>
<td>11</td>
</tr>
<tr>
<tr>
<tr>
</table>

2 回复 | 直到 6 年前

Vadim Hulevich 6 年前

    const tbl = document.getElementById("clearTable");
    const existProducts = {};
    [].forEach.call(tbl.querySelectorAll("tr td:first-child"), function(el) {
        if (existProducts[el.textContent]) {
            existProducts[el.textContent].count = existProducts[el.textContent].count + parseFloat(el.nextElementSibling.textContent);
            existProducts[el.textContent].el.nextElementSibling.textContent = existProducts[el.textContent].count;
            el.parentNode.remove();
        } else {
            existProducts[el.textContent] = {
                count: (existProducts[el.textContent] || 0) + parseFloat(el.nextElementSibling.textContent),
                el:el
            }
        }
    });

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <table id="clearTable" class="table-bordered" width="100%">
        <tr>
            <th>Product</th>
            <th>Cnt</th>
        </tr>
        <tr>
            <td>Product 1</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Product 2</td>
            <td>11</td>
        </tr>
        <tr>
            <td>Product 1</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Product 1</td>
            <td>8</td>
        </tr>
        <tr>
        <tr>
    </table>

OliverRadini 6 年前

首先,将所有内容行包装在 tbody 然后,您应该将产品名称映射为键,并合计所有计数:

var contentMap = {};
var contentRows = $('tbody tr').each(function() {
  var columns = $(this).find('td');
  console.log(columns);
  var value = parseInt(columns.eq(1).text(), 10);
  var key = columns.eq(0).text();
  if (!contentMap[key]) {
    contentMap[key] = 0;
  }
  contentMap[key] += value;
});
var tbody = $('tbody').empty();
Object.keys(contentMap).forEach(function(key) {
  tbody.append($('<tr><td>' + key + '</td><td>' + contentMap[key] + '</td>'));

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table-bordered" width="100%">

  <tr>

    <th>Product</th>
    <th>Cnt</th>

  </tr>
  <tr>
    <td>Product 1</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td>11</td>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>8</td>
  </tr>
  <tr>
    <tr>
</table>

小提琴: https://jsfiddle.net/gudzdanil/54Lc3yjd/6/