JavaScript sum table value

Question

I have the HTML table below. How can I sum up all of the columns based on continent group?

<html>
<table border="1">
  <tr>
    <th>Continent</th>
    <th>Population</th>
  </tr>
  <tr>
    <td>
      <center>Total</center>
    </td>
    <td>
      <center>sum(continent)???</center>
    </td>
  </tr>
  <tr>
    <td>
      <center>Asia</center>
    </td>
    <td>
      <center>sum(nation)??</center>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;">IND</font>
    </td>
    <td>
      <font style="float:right;">900,000</font>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;">JPY</font>
    </td>
    <td>
      <font style="float:right;">25,000</font>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;">CHN</font>
    </td>
    <td>
      <font style="float:right;">9,000</font>
    </td>
  </tr>
  <tr>
    <td>
      <center>Europe</center>
    </td>
    <td>
      <center>sum(nation)??</center>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;">RUS</font>
    </td>
    <td>
      <font style="float:right;">3,000</font>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;">ITA</font>
    </td>
    <td>
      <font style="float:right;">5,000</font>
    </td>
  </tr>
  <tr>
    <td>
      <center>Others</center>
    </td>
    <td>
      <center>sum(nation)??</center>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;">OTH</font>
    </td>
    <td>
      <font style="float:right;">90,000</font>
    </td>
  </tr>
</table>

</html>

Example: in order to get the Total, I need to add all of the continents, in this case Asia + Europe + Others, but first I need to have the subtotal of those continents. Additional info: Those continents and nations can be editable(add/remove) based on database. How can I do that?

In simple terms, like using Microsoft Excel, where we can sum up each/any column that we want.

I know JavaScript sum() that I got from other sites, but so far it only gives me the total for all column values. Below is the code, where index equals to number of column.

function sumColumn(index) {
    var total = 0;
    $("td:nth-child(" + index + ")").each(function() {
        total += parseFloat($(this).text(), 10) || 0;
    });

    return total.toFixed(2);
}

Is the HTML above static or is being created by JavaScript or a server side platform such as .net or PHP? How are you sourcing your original data? As there's no form input fields how are the values updated? — Ben Morris
– Ben Morris, Commented Dec 21, 2017 at 7:59
Hi Ben, As I've mention the data will be return by PHP from a database. — Tony
– Tony, Commented Dec 21, 2017 at 8:58

Subesh Bhandari · Accepted Answer · 2017-12-21 17:05:21Z

If you're trying to learn on how to use Jquery Selectors, I've modified the snippet according to what you have mentioned. However, what you are trying to do here is a bad way of handling data. You should never represent data in this form. Use PHP or ajax to load data to the elements.

$(function() {
  let asia_sum = 0;
  $('.asia').each( function() {asia_sum+= parseInt($(this).text()); });
  
  let eur_sum = 0;
  $('.eur').each( function() {eur_sum+= parseInt($(this).text()); });
  
  let other_sum = 0;
  $('.other').each( function() {other_sum+= parseInt($(this).text()); });
  
  let total = asia_sum + eur_sum + other_sum;
  
  $('#total').text(total);
  $('#eur').text(eur_sum);
  $('#asia').text(asia_sum);
  $('#other').text(other_sum);
  console.log(other_sum);
  
 });

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<table border="1">
  <tr>
    <th>Continent</th>
    <th>Population</th>
  </tr>
  <tr>
    <td>
      <center>Total</center>
    </td>
    <td>
      <center id='total'>sum(continent)???</center>
    </td>
  </tr>
  <tr>
    <td>
      <center >Asia</center>
    </td>
    <td>
      <center id='asia'>sum(nation)??</center>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;" >IND</font>
    </td>
    <td>
      <font style="float:right;" class='asia'>900000</font>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;">JPY</font>
    </td>
    <td>
      <font style="float:right;" class='asia'>25000</font>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;" >CHN</font>
    </td>
    <td>
      <font style="float:right;" class='asia'>9000</font>
    </td>
  </tr>
  <tr>
    <td>
      <center>Europe</center>
    </td>
    <td>
      <center id='eur'>sum(nation)??</center>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;" >RUS</font>
    </td>
    <td>
      <font style="float:right;" class='eur'>3000</font>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;">ITA</font>
    </td>
    <td>
      <font style="float:right;" class='eur'>5000</font>
    </td>
  </tr>
  <tr>
    <td>
      <center>Others</center>
    </td>
    <td>
      <center id='other'>sum(nation)??</center>
    </td>
  </tr>
  <tr>
    <td>
      <font style="float:right;" >OTH</font>
    </td>
    <td>
      <font style="float:right;" class='other'>90000</font>
    </td>
  </tr>
</table>
</body>
</html>

Collectives™ on Stack Overflow

JavaScript sum table value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related