JavaScript总和表值

时间:2017-12-21 03:20:47

标签: javascript html

我有下面的HTML表格。如何根据大陆组总结所有列?

<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>

示例:为了获得总计,我需要添加所有大陆,在这种情况下亚洲+欧洲+其他,但首先我需要这些大陆的小计。附加信息:这些大陆和国家可以根据数据库进行编辑(添加/删除)。我怎么能这样做?

简单来说,就像使用Microsoft Excel一样,我们可以总结我们想要的每个/任何列。

我知道从其他网站获得的JavaScript sum(),但到目前为止它只给出了所有列值的总和。下面是代码,其中索引等于列数。

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

    return total.toFixed(2);
}

1 个答案:

答案 0 :(得分:1)

如果您正在尝试学习如何使用Jquery选择器,我已根据您提到的内容修改了代码段。但是,您在此处尝试执行的操作是一种处理数据的错误方法。您永远不应该以此形式表示数据。使用PHP或ajax将数据加载到元素中。

&#13;
&#13;
$(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);
  
 });
&#13;
<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>
&#13;
&#13;
&#13;