[jQuery] 明細表の合計金額を計算するサンプル

jQueryを使って、一覧表に含まれる金額の合計値を求めるサンプルを作成しました。
╰(*´︶`*)╯

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <title>sum price</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>価格</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>デスクトップPC</td>
          <td class="price">200000</td>
        </tr>
        <tr>
          <td>モニター</td>
          <td>50000</td>
        </tr>
        <tr>
          <td>キーボード</td>
          <td>15000</td>
        </tr>
        <tr>
          <td>マウス</td>
          <td>6000</td>
        </tr>
         <tr>
          <td>プリンター</td>
          <td>40000</td>
        </tr>
      </tbody>
    </table>
  </body>
  <input type="button" value="合計">
</html>

CSS

body {
  background-color: #a3d5d3;
  font-family: 'Helvetica', 'Arial', sans-serif;
}

table,tr,th,td {
  font-size: 14px;
  list-style-type: none;
  margin: 0px auto;
  border-radius: 3px;
  border: 1px solid #000;
  padding: 5px;
  margin-bottom: 2px;
}

td {
  background: #eeeff0;
  padding-left: 15px;
}

input[type='button'] {
  display: block;
  font-size: 14px;
  margin: 20px auto 0px auto;
}

 Javascript

$(function(){
  $(":button").click(function(){
    // 表の金額を取得する(tdの奇数列を取得)
    var pricelist = $("table td:odd").map(function(index, val){
    //var pricelist = $("table td[class=price]").map(function(index, val){
      var price = parseInt($(val).text());
      if(price >= 0) {
        return price;
      } else {
        return null;
      }
    });
    // 価格の合計を求める
    var sum_price = 0;
    pricelist.each(function(index, val){
      sum_price = sum_price + val;
    });
  alert("合計:"+sum_price);
  });
});

 プレビュー

 

【point!!】

 「$("table td:odd") 」:
    table要素の中のtd要素のうち、奇数番号の要素を取得する。

 「$("××").map()」:
    要素の配列やオブジェクトから繰り返し処理を実行し、別の配列に置き換える。

 「parseInt()」:
    引数に渡した文字列を数値に変換する。

 「××.each()」:
    配列に対して繰り返し処理を実行する。

 「alert()」:
    引数に渡した表示をポップアップ表示させる。

 



投稿日:2019-11-05    更新日:2019-12-02

[スポンサーリンク]

関連記事
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
サイト内検索
プロフィール

プロフィール

[Name : じゃぶじゃぶ(@jbjb_2019)]
都内で社内SEをしているおじさん。
仕事で得られる知識だけでは限界を感じ、 WEBの勉強がてらITブログを開始。
サーバからWEBサイトまでフルスクラッチで開発しました。
現在は勉強のモチベーションを保つために活用中。
興味があることを雑記的に書いていきます。

[スポンサーリンク]

[スポンサードリンク]