从现有表

时间:2018-01-29 08:53:44

标签: javascript

我有一个包含多个表的网页(表/列的数量可能会根据用户输入而改变)

表1

A   1   8   9
B   2   6   3
C   12  5   4
D   3   2   4
E   5   3   2
F   6   3   0

表2

A   2   16  18
B   4   12  6
C   24  10  8
D   6   4   8
E   10  6   4
F   12  6   0

我想创建一个汇总表来合并所有表并对值进行求和

汇总表

A   3   24  27
B   6   18  9
C   36  15  12
D   9   6   12
E   15  9   6
F   18  9   0

我可以使用

获取特定表格的数据
var data = Array();

$("#table1 tbody tr").each(function(i, v){
    data[i] = Array();
    $(this).children('td').each(function(ii, vv){
        data[i][ii] = $(this).text();
    }); 
})

我需要构建一个我可以在2个数组中输入的函数,它将两者相加。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

如果行和列的计数始终相同,则可以通过以下方式执行此操作:

let table1Rows = $("#table1 tr");
let table2Rows = $("#table2 tr");
let summaryRows = $("#summary tr");

table1Rows.each(function(row, t1Row) {
  $(t1Row).children('td').each(function(column, t1Column) {
    if (column !== 0) {
      let t1ColumnText = $(t1Column).text();
      let t2ColumnText = $($(table2Rows[row]).children('td')[column]).text();
      let sum = parseInt(t1ColumnText, 10) + parseInt(t2ColumnText, 10);
      $($(summaryRows[row]).children('td')[column]).text(sum);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Table 1</h3>
<table id="table1">
  <tr>
    <td>A</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>B</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>C</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

<h3>Table 2</h3>
<table id="table2">
  <tr>
    <td>A</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>B</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>C</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<h3>Summary</h3>
<table id="summary">
  <tr>
    <td>A</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>B</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>C</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>