javascript - 如何在 JavaScript 中迭代表格行和单元格并添加值？

Question

这是我的 HTML 表格，在表格上我有 3 行和 3 列，我想要做的是将前两列添加在一起，然后将结果放在第三列中。任何帮助将不胜感激。

CSS:

<style type="text/css">
  .tg  { border-collapse:collapse; border-spacing:0; border-color:#bbb; }
  .tg td { font-family:Arial, sans-serif; font-size:14px; padding:10px 5px;border-
style:solid; border-width:0px; overflow:hidden; word-break:normal; border-
color:#bbb; color:#594F4F; background-color:#E0FFEB; }
  .tg th { font-family:Arial, sans-serif; font-size:14px; font-
weight:normal; padding:10px 5px; border-style:solid; border-
width:0px; overflow:hidden; word-break:normal; border-
color:#bbb; color:#493F3F; background-color:#9DE0AD; }
  .tg .tg-jf1j { font-weight:bold; font-size:20px; color:#ffccc9; text-
align:center; vertical-align:top; }
  .tg .tg-yw4l { vertical-align:top; }
</style>

HTML:

<table class="tg">
    <tr>
        <th class="tg-yw4l">1</th>
        <th class="tg-yw4l">1</th>
        <th id="a"></th>
    </tr>
    <tr>
        <td class="tg-yw4l">1</td>
        <td class="tg-yw4l">2</td>
        <td id="a"></td>
    </tr>
    <tr>
        <td class="tg-yw4l">2</td>
        <td class="tg-yw4l">3</td>
        <td id="a"></td>
    </tr>
</table>

下面是我尝试循环遍历表格并将前两列添加在一起的地方。

<script type="text/javascript">

    var table = document.getElementsByClassName("tg");

    for (var r = 0; r < 3; r++) {
        var sum1 = 0;

        for (var c = 0; c < 3; r++) {
            if (table[r][c].className == 'tg-yw41') {
                sum1 += isNaN(table[r][c].innerHTML) ? 0 : parseInt(table[r][c].innerHTML);
            }
        }

        document.getElementById('a').innerHTML = sum1;
    }
 </script>

Answer 1

下面的代码将添加第一个和第二个 td/th 并在第三个 td/th 中显示总和。

注意:您可以进一步添加 Nan 和其他内容的错误处理。

Jquery 代码:

$('table.tg tr').each(function() {
    var third_var = parseInt($(this).find('th:first-child, td:first-child').html()) + parseInt($(this).find('th:nth-child(2), td:nth-child(2)').html());
    $(this).find('th:nth-child(3), td:nth-child(3)').html(third_var);
});

Javascript代码:Online Demo 按照@Alex_89的要求

var table = document.getElementsByClassName("tg");
var t  = table[0];
for (var r = 0; r < t.rows.length; r++) {
    t.rows[r].cells[2].innerHTML = parseInt(t.rows[r].cells[0].innerHTML) + parseInt(t.rows[r].cells[1].innerHTML);
}