码迷,mamicode.com
首页 > 其他好文 > 详细

二级联动大红袍茶叶

时间:2018-05-21 10:32:30      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:批量   remove   UNC   body   query   onclick   联动   type   cti   

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>商品管理</title>
<script src="libs/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>

二级联动大红袍茶叶

标签:批量   remove   UNC   body   query   onclick   联动   type   cti   

原文地址:https://www.cnblogs.com/xiaxinxin/p/9065574.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!