CODEWITHSUNDEEP
javascripthtml
Tony
Tony

Reputation: 119

JavaScript sum table value

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

Upvotes: 1

Views: 494

Answers (1)

Subesh Bhandari
Subesh Bhandari

Reputation: 1122

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>

Upvotes: 1

Related Questions