<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>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;
}$(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);
});
});
External CSS
This Pen doesn't use any external CSS resources.