如何遍历JavaScript中的表行和单元格并添加值？

Question

This is my HTML table, on the table I have 3 rows and 3 columns, what I am trying to do is add the first two columns together and put the result in the third column. Any help would be greatly appreciated.

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>

Below here is where I try looping through my table and adding the first two columns together.

<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

Below code will add first and second td/th and show sum in third td/th .

Note : You can further add error handling of Nan and other things.

Jquery Code :

$('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 Code : Online Demo As requested by @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);
}

Answer 2

Solution for your question

 var table = document.getElementById("tg"); for (var i = 0, row; row = table.rows[i]; i++) { var sum1= 0; for (var j = 0, col; col = row.cells[j]; j++) { sum1+=(col.textContent!='')?parseInt(col.textContent):0; } var a='a'+(i+1).toString(); document.getElementById(a).innerHTML = sum1; sum1=0; } 

 .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} 

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

Answer 3

solution with plain js with th and td support

 window.onload = function(){ var table = document.getElementsByClassName("tg")[0]; var rows = table.getElementsByTagName('tr'); for(var i =0 ; i < rows.length;i++ ) { if(i == 0) { var cells = rows[i].getElementsByTagName('th'); cells[2].innerHTML = parseInt(cells[0].innerHTML) + parseInt(cells[1].innerHTML); continue; } var cells = rows[i].getElementsByTagName('td'); cells[2].innerHTML = parseInt(cells[0].innerHTML) + parseInt(cells[1].innerHTML); } } 

 .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 type="text/css"> </style> <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>