如何在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代码：在线演示按照 @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

解决方案

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

用th和td支持的普通js解决方案

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>