javascript - 获取表中某列的总和

Question

假设我有下表，并且我想添加列 Credits 来获取其总和

<table id="tbl_semester11">
       <thead>
          <tr>
             <th>Semester 1</th>
          </tr>
       </thead>
       <thead>
          <tr>
             <th>Module Code</th>
             <th>Module Name</th>
             <th>Credits</th>
             <th>Module %</th>
             <th>Grade</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <td>MGMT1101C</td>
             <td>Management Seminar</td>
             <td id="txtcredit112" class="sum">3</td>
             <td><input type="number" id="txtpercentage112" min="40" max="100" onchange="process([1,1,2,5]);"></td>
             <td id="txtgrade112">D</td>
          </tr>
          <tr class="alt">
             <td>HCA1105C</td>
             <td>Computer Architecture</td>
             <td id="txtcredit113" class="sum">4</td>
             <td><input type="number" id="txtpercentage113" min="40" max="100" onchange="process([1,1,3,5]);"></td>
             <td id="txtgrade113">D</td>
          </tr>
          <tr>
             <td>PROG1115C</td>
             <td>Object Oriented Software Development I</td>
             <td id="txtcredit114" class="sum">4</td>
             <td><input type="number" id="txtpercentage114" min="40" max="100" onchange="process([1,1,4,5]);"></td>
             <td id="txtgrade114">D</td>
          </tr>
          <tr class="alt">
             <td>MATH1103C</td>
             <td>Decision Mathematics</td>
             <td id="txtcredit115" class="sum">3</td>
             <td><input type="number" id="txtpercentage115" min="40" max="100" onchange="process([1,1,5,5]);"></td>
             <td id="txtgrade115">D</td>
          </tr>
          <tr>
             <td>ITE1107C</td>
             <td>Language and Communication Seminar</td>
             <td id="txtcredit116" class="sum">3</td>
             <td><input type="number" id="txtpercentage116" min="40" max="100" onchange="process([1,1,6,5]);"></td>
             <td id="txtgrade116">D</td>
          </tr>
          <tr class="al">
             <td></td>
             <td></td>
             <td></td>
             <td></td>
          </tr>
          <tr>
             <td bgcolor="#b3ffb3"><b>S.P.A</b></td>
             <td bgcolor="#4dff4d" id="spa11">40.7</td>
          </tr>
       </tbody>
    </table>

这是我的 JS

function getsum(arr) {
    var sum = 0;
    var tbl_id = 'tbl_semester' + arr[0] + arr[1];
    $('#' + tbl_id + '.sum').each(function () {
        sum += +(this).text()||0;
    });
    return sum;

arr 与 process 的参数相同，即 [1,1,3,5]。问题是 sum 总是返回 0

Answer 1

您的选择器错误。如果要选择具有 .sum 类的子级，则应在父级和子级之间添加空格。你的函数应该是:

function getsum(arr) {
  var sum = 0;
  var tbl_id = 'tbl_semester' + arr[0] + arr[1];
  $('#' + tbl_id + ' .sum').each(function () {
      sum += parseInt($(this).text())||0;
  });
  return sum;
}

另外，我使用了 parseInt() 因为 .text() 返回一个字符串。这样您就一定会得到一个 NaN 值或一个实际的整数。