[jQuery] 明細表の合計金額を計算するサンプル
-
カテゴリ：
- JavaScript
-
タグ：
- #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
