您的位置：首页 > 其它

全选反选批量删除计算总价隔行换色

2018-03-26 15:35 281 查看

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
	ul{
	list-style-type: none;
	}
	.tip{
	color: red;
	}
	</style>
	</head>
	<body>
	<fieldset id="">
	<legend>添加商品</legend>
	<ul>
	<li>商品名称：<input type="text" id="sname" value="大红袍" /><span id="tip_name" class="tip"></span> </li>
	<li>商品价格：<input type="text" id="sprice" value="120"/><span id="tip_price" class="tip"></span> </li>
	<li>商品数量：<input type="number" id="snum" value="2"/><span id="tip_num" class="tip"></span> </li>
	<li>商品类型：<select><option>茶叶</option><option>饮料</option></select><span id="tip_type"></span> </li>
	<li><input type="button" id="btn_ok" value="确定"/></li>
	</ul>
	</fieldset>

	<div>
	<div>
	<button id="btn_all">全选</button>
	<button id="btn_reverse">返选</button>
	<button id="btn_delall">批量删除</button>
	</div>
	<table border="1" cellspacing="0" cellpadding="0">
	<thead style="background: gray;">
	<tr>
	<td>编号</td>
	<td>商品名称</td>
	<td>商品价格</td>
	<td>商品数量</td>
	<td>商品类别</td>
	<td>小计</td>
	<td>删除</td>
	</tr>
	</thead>
	<tbody>

	</tbody>
	</table>
	<div>
	<span id="stotal">商品总价为：￥0元</span>
	</div>





	</div>

	<script type="text/javascript">
	function del(obj){//obj是 js对象 parent() 是 jquery方法
	// var tr=$(obj).parent().parent();//如果要调用 parent()方法，需要将js对象转换成jquery对象
	// tr.remove();
	var tr=obj.parentNode.parentNode;
	tr.remove();

	//重新设置背景色
	setTrBg();
	//重新计算总价
	calTotal();

	}
	//计算总价
	function calTotal(){
	var total=0;
	//要得到第一个tr元素中的第6个子元素
	var tds=$("tbody tr :nth-child(6)");
	tds.each(function(){
	//得到td的文本
	var v=$(this).text();
	total=total+parseFloat(v);
	});
	$("#stotal").html("商品总价为：￥"+total+"元");

	}
	//设置背景色
	function setTrBg(){
	$("tbody tr:even").css("background","gainsboro");//偶数
	$("tbody tr:odd").css("background","white");
	}


	//页面初使化事件中
	$(function(){

	//添加商品
	$("#btn_ok").click(function(){
	$(".tip").html("");//清空内容

	//1.商品名称大于2位且小于20位
	var name=$("#sname").val();
	if(!(name.length>2 && name.length<20)){
	$("#tip_name").html("*商品名称大于2位且小于20位");
	// $("#tip_name").css("color","red");
	return;
	}
	//2.商品价格不能为空
	var price=$("#sprice").val();
	if(price==""){
	$("#tip_price").html("*商品价格不能为空");
	return;
	}
	//3.商品数量必须大于0
	var num=$("#snum").val();
	//将一个字符串转换为int类型，使用parseInt()
	if(parseInt(num)<=0){
	$("#tip_num").html("*商品数量必须大于0");
	return;
	}

	//添加商品
	addShop();
	//计算总价
	calTotal();
	//设置背景色
	setTrBg();

	});

	function addShop(){
	var name=$("#sname").val();
	var price=$("#sprice").val();
	var num=$("#snum").val();
	//得到类型--注意要加空格
	var type=$("select :selected").text();
	//小计
	var count=parseFloat(price)*parseInt(num);


	//拼接tr
	var newtr="<tr>"
	+"<td><input type='checkbox'/></td>"
	+"<td>"+name+"</td>"
	+"<td>"+price+"</td>"
	+"<td>"+num+"</td>"
	+"<td>"+type+"</td>"
	+"<td>"+count+"</td>"
	+"<td><button onclick='del(this)'>删除</button></td>"
	+"</tr>";

	//添加到table表中
	$("tbody").append(newtr);

	}

	$("#btn_all").click(function(){
	var ches=$("input[type='checkbox']");
	ches.each(function(){
	$(this).prop("checked",true);//设置为选中状态
	});
	});
	$("#btn_reverse").click(function(){
	//选择中当前所有选中的checkbox
	var ches=$("input:checked");
	ches.each(function(){
	$(this).prop("checked",false);//设置为不选中
	});
	});

	//批量删除
	$("#btn_delall").click(function(){
	var ches=$("input:checked");
	ches.each(function(){
	var t=$(this).parent().parent();
	t.remove();
	});

	//重新设置背景色
	setTrBg();
	//重新计算总价
	calTotal();

	});








	});
	</script>
	</body>
	</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

全选 反选 批量删除 计算总价 隔行换色

全选反选批量删除计算总价隔行换色