实现的是table 多选 全选 删除 计算指定列总额
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>table1</title>
</head>
<style type="text/css">
html,body {
height: 100%;
color: #00FF00;
}
body{}
a {
color: #c75f3e;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 10px 10px 5px 10px;
background: #efe5f4;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
p{
font-size: 20px;
color: black;
}
input{
width: 40px;
}
.myButton {
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
background-color:#79bbff;
border-radius:20px;
border:1px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background-color:#378de5;
}
.myButton:active {
position:relative;
top:1px;
}
.del{
color: orangered;
}
</style>
<script src="./jquery-3.4.1.min.js"></script>
<body>
<table id="mytable" cellspacing="0" >
<caption> </caption>
<tr>
<th scope="col">全选<input type="checkbox" id="select_all"></th>
<th scope="col">商品id</th>
<th scope="col">商品名</th>
<th scope="col">商品单价(元/kg)</th>
<th scope="col">购买数量</th>
<th scope="col">总价</th>
<th scope="col">操作</th>
</tr>
<tr class="g">
<td class="row"><input type="checkbox" class="select_one"></td>
<td class="g_id">2</td>
<td class="goods">苹果</td>
<td class="price">20</td>
<td class="num"><input type="text" value=1></td>
<td class="sum"></td>
<td class="option"><button class="del">删除</button></td>
</tr>
<tr class="g">
<td class="row"><input type="checkbox" class="select_one"></td>
<td class="g_id">2</td>
<td class="goods">香蕉</td>
<td class="price">20</td>
<td class="num"><input type="text" value=1></td>
<td class="sum"></td>
<td class="option"><button class="del">删除</button></td>
</tr>
<tr class="g">
<td class="row"><input type="checkbox" class="select_one"></td>
<td class="g_id">2</td>
<td class="goods">芒果</td>
<td class="price">20</td>
<td class="num"><input type="text" value=1></td>
<td class="sum"></td>
<td class="option"><button class="del">删除</button></td>
</tr>
<tr class="g">
<td class="row"><input type="checkbox" class="select_one"></td>
<td class="g_id">2</td>
<td class="goods">香蕉</td>
<td class="price">30</td>
<td class="num"><input type="text" value=1></td>
<td class="sum"></td>
<td class="option"><button class="del">删除</button></td>
</tr>
</table>
<p>总金额</p>
<button class="settlement">结算</button>
<script>
$(function () {
//需求1:上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
//需求2:下面的多选框,都有单击事件:
//如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.
//思路 checked属性 是固有属性 prop("checked")获取 把全选状态给3个小复选框就行
//需求1：
$('#select_all').click(function () {
//获取这多选框的checked值。
var checkedValue = $(this).prop('checked');
//让下面的多选框们的checked跟随这个checkedValue
$('.select_one').prop('checked',checkedValue);
});
//需求2：
$('.select_one').click(function () {
//判断下面的那四个多选框是否都被选中了。伪数组
//获取到下面所有多选框的个数。
var numOfAll = $('.select_one').length;
//获取到下面被选中的多选框的个数。
var numOfSelect = $('.select_one:checked').length;
//判断
$('#select_all').prop('checked',numOfAll == numOfSelect);
});
//删除操作
$(".del").on({
click: function () {
//1.提示
alert("已经删除"+ $(this).parent().siblings('.goods').text());
//2.移除
$(this).parents('tr').remove();
getNum();
}
})
$("input").change(function () {
getNum();
})
//小计
getNum();
function getNum() {
var count = 0;
var money = 0;
var sum_price = 0;
//遍历tr 计算出每个商品的总价格
$("tr").each(function (i, ele) {
count = parseInt($(ele).children(".num").children("input").val());
money = parseInt($(ele).children(".price").text());
//保留两位小数
$(ele).children(".sum").text("￥"+(money*count).toFixed(2));
});
$("tr .sum").each(function (i, ele) {
//截取￥
sum_price += parseFloat($(ele).text().substr(1));
})
//计算出所有商品的总价格
$("p").text("订单总金额："+sum_price.toFixed(2)+"￥");
}
// 结算
$(".settlement").on({
click: function () {
var final_price = 0;
// 找出所有checked
$(".select_one").each(function (i,e) {
if ($(this).prop('checked')){
//转为float并截取后计算选中的总价格
final_price += parseFloat($(this).parent().siblings(".sum").text().substr(1));
}
})
alert("结算总额为："+final_price+"￥");
}
})
});
</script>
</body>
</html>
版权声明：本文为qq_36702286原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。