Question

我想总计一个表格列。

以下是仅用于测试目的的两列示例。我想使用javascript循环计算表列的项目总数。

如果我们不知道表中有多少行和列，如何创建循环？我希望你理解我的意思，也希望你的善意建议。

<p><b>Student at Stanford University 2013-2014</b></p>
<table><tr><th>Faculty (Subject)</th><th>Student 2013</th><th>Student 2014</th></tr></table>
<table id="sdtable">
    <tr><th>Business</th><td>12922</td><td>11420</td></tr>
    <tr><th>Earth Sciences</th><td>4320</td><td>4611</td></tr>
    <tr><th>Education</th><td>14560</td><td>13490</td></tr>
    <tr><th>Engineering</th><td>8750</td><td>9863</td></tr>
    <tr><th>Humanities & Sciences</th><td>7819</td><td>7219</td></tr>
    <tr><th>Medicine</th><td>5219</td><td>4200</td></tr>
</table>

<button onclick="Calculate()">Calculate</button>
<div id="Studentf" class="Studentf"></div>
<div id="Students" class="Students"></div>
<div id="Studentt" class="Studentt"></div>

和

var ftable = document.getElementById("sdtable");
var i= 0;
var sumFirst=0;
var sumSecond=0;
var sumTotal=0;

function Calculate(){

    for (i=0;i<ftable.rows.length; i++){
        sumFirst=sumFirst+parseInt(ftable.rows[i].cells[1].innerHTML);
        sumSecond=sumSecond+parseInt(ftable.rows[i].cells[2].innerHTML);
    } 
    sumTotal=sumFirst+sumSecond;

    document.getElementById("Studentf").innerHTML +="<b>Student in 2013 = </b>" +sumFirst;
    document.getElementById("Students").innerHTML +="<b>Student in 2014 = </b>" +sumSecond;
    document.getElementById("Studentt").innerHTML +="<b>Total Student = </b>" +sumTotal;

}

Answer 1

这里的关键是您需要使用cells集合来获取在向表中添加新年时可以更改的列数。您还必须每年动态创建摘要信息元素。

以下是一个例子：

var ftable = document.getElementById("sdtable");
var i = 0;
var sumFirst = 0;
var sumSecond = 0;
var sumTotal = 0;

function Calculate() {

    var rows = ftable.tBodies[0].rows,
        header = ftable.tHead.rows[0],
        cells = ftable.tBodies[0].rows[0].cells,
        years = [];

    for (var i = 0; i < rows.length; i++) {
        for (var j = 1; j < cells.length; j++) {
            if (!years[j]) years[j] = 0;
            years[j] += parseInt(rows[i].cells[j].innerHTML);
        }
    }

    sumTotal = years.reduce(function(prev, curr) {
        return prev + curr;
    }, 0);

    var sum = document.getElementById("sum");
    sum.innerHTML = '';
    for (var j = 1; j < cells.length; j++) {
        console.log(header.cells[j])
        sum.insertAdjacentHTML('afterbegin', '<p><b>' + header.cells[j].innerHTML + '</b> = ' + years[j] + '</p>');
    }
    sum.insertAdjacentHTML('beforeend', "<b>Total Student = </b>" + sumTotal);
}

演示：http://jsfiddle.net/x2sscpxL/1/

Answer 2

该表应该看起来更像：

<table>
  <thead>
    <tr><th>Faculty (Subject)</th><th>Student 2013</th><th>Student 2014</th></tr>
  </thead>
  <tbody id="sdtable">
    <tr><th>Business</th><td>12922</td><td>11420</td></tr>
    <tr><th>Earth Sciences</th><td>4320</td><td>4611</td></tr>
    <tr><th>Education</th><td>14560</td><td>13490</td></tr>
    ...
   </tbody>
  <tfoot>
    <tr><th>Totals:</th><th></th><th></th></tr>
</table>

将标题，正文和页脚拆分为单独的表格部分。该函数应该像：

function calculate(){

    // Get a reference to the tBody
    var tBody = document.getElementById('sdtable');
    if (!tBody) return;

    var row, rows = tBody.rows;
    var cell, cells;
    var cellTotals = {};

    // For each row in the body
    for (i=0, iLen=rows.length; i<iLen; i++) {
      row = rows[i];
      cells = row.cells;

      // Add the cells in each column, starting on the second column
      // i.e. starting with cell index 1
      for (var j=1, jLen=cells.length; j<jLen; j++) {
        cell = cells[j];

        if (j in cellTotals) {
          cellTotals[j] += Number(cell.textContent || cell.innerText);
        } else {
          cellTotals[j] = Number(cell.innerHTML);
        }
      }
    }

    // Write the totals into the footer
    var tFoot = tBody.parentNode.tFoot;
    row = tFoot.rows[0];
    for (var k=1; k<jLen; k++) {
      row.cells[k].innerHTML = cellTotals[k];
    }
}

请注意，按照惯例，名称以大写字母开头的变量是为构造函数保留的（尽管常量通常都是大写字母）。

Answer 3

这里是n行和n列的表的计算注意：标题单元格包含在thead部分

var ftable = document.getElementById("sdtable");
var tbody = ftable.getElementsByTagName("tbody")[0]
var columnsCount = ftable.rows[0].cells.length;
  
var sumTotal = [];
for(i=0; i<columnsCount;i++)
  sumTotal.push(0); //here initialize with zero

function Calculate(){

    for (i=0;i<tbody.rows.length; i++){
      for (j=0; j<columnsCount; j++)
        if (tbody.rows[i].cells[j] && tbody.rows[i].cells[j].innerHTML)           
         sumTotal[j] += parseInt(tbody.rows[i].cells[j].innerHTML);

    } 
    
  return sumTotal;
  

}
 

sumTotal = Calculate();



tfootrow = ftable.tFoot.rows[0];
console.log(tfootrow)

for(i=0; i<sumTotal.length; i++){
  tfootrow.insertCell(i).innerHTML = sumTotal[i];
  }

<table id="sdtable">
  <thead>
    <tr>
      <th>Business</th>
      <th>Earth Sciences</th>
      <th>Education</th>
      <th>Engineering</th>
      <th>Humanities & Sciences</th>
      <th>Medicine</th>
      </tr>
  </thead>
  <tbody>
    <tr><td>12922</td><td>11420</td></tr>
    <tr><td>4320</td><td>4611</td></tr>
    <tr><td>14560</td><td>13490</td></tr>
    <tr><td>8750</td><td>9863</td></tr>
    <tr><td>7819</td><td>7219</td></tr>
    <tr><td>5219</td><td>4200</td></tr>
    <tr><td></td><td>1</td><td>2</td></tr>
   </tbody>
   <tfoot>
     <tr></tr>
   </tfoot>
</table>

如何在js中创建行单元循环

3 个答案:

演示：http://jsfiddle.net/x2sscpxL/1/