How do I iterate through table rows and cells in JavaScript and add the values?

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>

Touheed Khan · Accepted Answer · 2018-02-22 14:10:24Z

3

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);
}

edited Feb 22, 2018 at 14:10

answered Feb 22, 2018 at 13:30

Touheed Khan

2,14918 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alex_89 Over a year ago

I can't try it right now, @Touheed, but I think yours is a good solution. Just remember he's not using JQuery. Maybe update your answer to pure JS. However, Josh, if you can, I thinks everyone here would strongly suggest you incorporate JQuery to your project/demo.

Touheed Khan Over a year ago

@Alex_89 : thanks. I didn't considered that. I'll play with JS and see if I can find solution in JS too.

Touheed Khan Over a year ago

@Alex_89 : updated answer, heartbreaking to see other answer get accepted ;P :D

Alex_89 Over a year ago

It happens man, :D... However, I just tested your code with the demo you left in JSFiddle and it works perfectly. At least your answer gets an up vote from me.

Alex_89 Over a year ago

BTW, @josh, it's ok to accept more than one answer if they're correct and solve your problem too.

|

Jay Shankar Gupta · Accepted Answer · 2018-02-22 13:58:31Z

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>

Kunal Awasthi · Accepted Answer · 2018-02-22 14:01:59Z

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>

Collectives™ on Stack Overflow

How do I iterate through table rows and cells in JavaScript and add the values?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related