[jQuery] テーブルに行を追加＋合計金額を計算するサンプル
-
カテゴリ：
- JavaScript
-
タグ：
- #jQuery
セレクタとクリックイベント、マップ関数を応用して、「行追加＋合計金額の計算」のサンプルを作成しました。╰(*´︶`*)╯
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sum price</title>
</head>
<body>
<input type="text" id="product_name" placeholder="商品">
<input type="text" id="product_price" placeholder="価格">
<input type="button" id="add" value="add">
<table>
<thead>
<tr>
<th>商品</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>デスクトップPC</td>
<td class="price">200000</td>
</tr>
<tr>
<td>モニター</td>
<td class="price">50000</td>
</tr>
<tr>
<td>キーボード</td>
<td class="price">15000</td>
</tr>
<tr>
<td>マウス</td>
<td class="price">6000</td>
</tr>
<tr>
<td>プリンター</td>
<td class="price">40000</td>
</tr>
</tbody>
</table>
</body>
<div>
<p class="sum_price">合計：0円</p>
</div>
</html>CSS
body {
background-color: #a3d5d3;
font-family: 'Helvetica', 'Arial', sans-serif;
width: 450px;
margin: 0 auto;
padding: 20px;
}
table, input {
margin: 5px;
}
input[type=text] {
width: 120px;
}
table,tr,th,td {
font-size: 20px;
width: 70%;
list-style-type: none;
border-radius: 3px;
border: 1px solid #000;
padding: 5px;
}
td {
background: #eeeff0;
padding-left: 15px;
}Javascript
$(function(){
// 画面表示時に価格の合計値を計算
var sum_price = sum();
// addボタン押下時の処理
$("#add").click(function(){
var name = $("#product_name").val();
var price = $("#product_price").val();
$('table').append('<tr><td>'+ name
+'</td><td class="price">'+price
+'</td></tr>');
// 合計値を再計算
var sum_price = sum();
});
function sum(){
// 表の金額を取得する(tdの奇数列を取得)
var pricelist = $("table td[class=price]").map(function(index, val){
var price = parseInt($(val).text());
if(price >= 0) {
return price;
} else {
return null;
}
});
// 価格の合計を求める
var total = 0;
pricelist.each(function(index, val){
total = total + val;
});
$(".sum_price").text("合計："+total+"円");
}
});
サンプル
【point！！】
$("#add")：
id名（id=add）で要素を指定。
$("××").click()：
要素のクリックイベント。
$("××").append()；
要素に値を挿入する。
$("table td[class=price]")：
table要素に含まれるtd要素のclass属性が「price」の要素を取得
$("××").map():
要素の配列やオブジェクトから繰り返し処理を実行し、別の配列に置き換える。
parseInt()：
引数に渡した文字列を数値に変換する。
××.each()：
配列に対して繰り返し処理を実行する。
投稿日：2019-11-10
更新日：2019-12-02
