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

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/