Continent Popul" /> Continent Popul" /> Continent Popul"/>

TechQA.

JavaScript sum table value

483 views Asked by At

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);
}
javascript html
Original Q&A
1

There are 1 answers

0
Subesh Bhandari On BEST ANSWER

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>

Related Questions in JAVASCRIPT

Related Questions in HTML

Popular Questions

Trending Questions