Question

我有多个表，我想将tbody下的所有td求和并在thead中输出值。我也有多个表，因为我正在使用可排序的jquery函数在表之间移动td行，如果在拖放时更新总和数，那就太好了。

这些值是字符串格式，但是如果可以简化的话，我可能可以用该值创建一个数据对象。我正在使用jquery，但是普通的javascript也可以。

该表应如下所示（粗体数字是应计算的数字）：

    <table>
      <thead>
        <tr>
          <td>Main object A</td>
          <td><b>120000</b></td>
          <td><b>45000</b></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Object A</td>
          <td>100 000</td>
          <td>20 000</td>
        </tr>
        <tr>
          <td>Object B</td>
          <td>10 000</td>
          <td>25 000</td>
        </tr>
      </tbody>
    </table>
    <table>
      <thead>
        <tr>
          <td>Main object B</td>
          <td><b>220000</b></td>
          <td><b>35000</b></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Object A</td>
          <td>200 000</td>
          <td>20 000</td>
        </tr>
        <tr>
          <td>Object B</td>
          <td>10 000</td>
          <td>25 000</td>
        </tr>
      </tbody>
    </table>

Answer 1

我不完全了解您的需求，但是应该是这样。如果你点我照亮，我可以帮助你得到想要的东西

$("table").each(function(index, el) {
  var sum = 0;
  $(el).find("tbody > tr > td:nth-child(2)").each(function(i, e) {
    sum += parseInt($(e).html().replace(" ", ""));
  });
  $(el).find("thead > tr > td").eq(1).html(sum);

  var sum1 = 0;
  $(el).find("tbody > tr > td:nth-child(3)").each(function(i, e) {
    sum1 += parseInt($(e).html().replace(" ", ""));
  });
  $(el).find("thead > tr > td").eq(2).html(sum1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Main object A</td>
      <td>[Sum of below tbody fields A]</td>
      <td>[Sum of below tbody fields B]</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Object A</td>
      <td>100 000</td>
      <td>20 000</td>
    </tr>
    <tr>
      <td>Object B</td>
      <td>10 000</td>
      <td>25 000</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <td>Main object B</td>
      <td>[Sum of below tbody fields A]</td>
      <td>[Sum of below tbody fields B]</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Object A</td>
      <td>100 000</td>
      <td>20 000</td>
    </tr>
    <tr>
      <td>Object B</td>
      <td>10 000</td>
      <td>25 000</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用类似这样的东西。基本上，代码查找要求和的元素，然后将其附加到“对象”总面积。该代码将“对象”行的数字加起来，然后将A的总数放在左上角，并将B的总数放在右上角：

let tables = $("table").toArray(); // Get all the tables
let a = false;
for(table of tables) { // Loop through each table
  let tableRow = $(table).find('tbody').find('tr').toArray(); // Get the tr data for each object
  let total = 0;
  for(tableData of tableRow) {
    for(data of $(tableData).children().toArray()) {
      let number = $(data).html().replace(' ', '');
      if(!isNaN(number)) { // If the string is considered a number then add it
       total += parseInt(number);
      }
    }
    let totalElements = $(table).find('thead').find('td').toArray();
    $(totalElements[a + 1]).html(total);
    a = !a;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Main object A</td>
      <td>[Sum of below tbody fields A]</td>
      <td>[Sum of below tbody fields B]</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Object A</td>
      <td>100 000</td>
      <td>20 000</td>
    </tr>
    <tr>
      <td>Object B</td>
      <td>10 000</td>
      <td>25 000</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <td>Main object B</td>
      <td>[Sum of below tbody fields A]</td>
      <td>[Sum of below tbody fields B]</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Object A</td>
      <td>100 000</td>
      <td>20 000</td>
    </tr>
    <tr>
      <td>Object B</td>
      <td>10 000</td>
      <td>25 000</td>
    </tr>
  </tbody>
</table>

tbody中的总和表分别用于多个表

2 个答案: