2017-12-21 2 views
0

私は以下のHTMLテーブルを持っています。大陸グループに基づいて列のすべてをどのように集計できますか?JavaScript sumテーブルの値

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

Javascriptを '合計()'関数は何? –

+0

ロビー:私の悪い、コードを追加するのを忘れてしまった。質問が編集されました。 – Tony

+0

HTMLは静的であるか、JavaScriptや.netやPHPなどのサーバーサイドプラットフォームによって作成されていますか?元のデータはどのように調達していますか?フォーム入力フィールドがないので、値はどのように更新されますか? –

答えて

1

Jquery Selectorsの使い方を習得しようとしている場合は、あなたが言及した内容に従ってスニペットを修正しました。しかし、あなたがここでやろうとしていることは、データを扱う悪い方法です。この形式でデータを表現してはいけません。 PHPまたはajaxを使用して、要素にデータをロードします。

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

+0

多くのありがとうSubesh ... – Tony

+0

ようこそ。 –

関連する問題