[jQuery]テーブルから行を削除するサンプル
-
カテゴリ：
- JavaScript
-
タグ：
- #jQuery
javascriptとjQuery絶賛勉強中です！
今回は表の中から任意の一行を削除するのサンプルを作成しました。╰(*´︶`*)╯
javascriptなのでブラウザの更新（F5）で元に戻ってしまうことに注意してください。
これで前回のサンプルとあわせると、テーブルのレコードの抜き差しが可能になりました。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sum price</title>
</head>
<body>
<table>
<thead>
<tr>
<th>商品</th>
<th>価格</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>デスクトップPC</td>
<td class="price">200000</td>
<td><input type="button" id="delete" value="削除"></td>
</tr>
<tr>
<td>モニター</td>
<td class="price">50000</td>
<td><input type="button" id="delete" value="削除"></td>
</tr>
<tr>
<td>キーボード</td>
<td class="price">15000</td>
<td><input type="button" id="delete" value="削除"></td>
</tr>
<tr>
<td>マウス</td>
<td class="price">6000</td>
<td><input type="button" id="delete" value="削除"></td>
</tr>
<tr>
<td>プリンター</td>
<td class="price">40000</td>
<td><input type="button" id="delete" value="削除"></td>
</tr>
</tbody>
</table>
</body>
<div>
<b><p class="sum_price">合計：0円</p></b>
</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: 14px;
width: 70%;
list-style-type: none;
border-radius: 3px;
border: 1px solid #000;
padding: 5px;
}
td {
background: #eeeff0;
padding-left: 12px;
}Javascript
$(function(){
// 画面表示時に価格の合計値を計算
sum();
// 削除ボタン押下時の処理
// ↓最初の削除ボタンしか反応しない23
//$("#delete").click(function(event){
// ↓すべての削除ボタンが反応する
$("[id=delete]").click(function(event){
var target = $(event.target);
target.parents("tr").remove();
// 合計値を再計算
sum();
});
/**** 共通関数 ****/
// 要素を削除する
function deleteElement(name, element) {
return;
}
// 合計値を求める
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+"円");
}
});サンプル
投稿日：2019-11-16
更新日：2019-12-02
