<!DOCTYPE html>
<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>
<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=" " /><span id="tip_price" class="tip"></span> </li>
<li>商品数量：<input type="number" id="snum" value=" " /><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>
<!--空间组-->
<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=" " /><span id="tip_price" class="tip"></span> </li>
<li>商品数量：<input type="number" id="snum" value=" " /><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>
<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>
</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();
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();
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 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 setTrBg() {
$("tbody tr:even").css("background", "gainsboro"); //偶数
$("tbody tr:odd").css("background", "white");
}
//页面初使化事件中
$(function() {
$(function() {
//添加商品
$("#btn_ok").click(function() {
$(".tip").html(""); //清空内容
$("#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;
}
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();
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);
* 添加商品
*/
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>";
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);
$("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); //设置为不选中
});
});
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();
$("#btn_delall").click(function() {
var ches = $("input:checked");
ches.each(function() {
var t = $(this).parent().parent();
t.remove();
});
//重新设置背景色
setTrBg();
//重新计算总价
calTotal();
});
});
</script>
</body>
});
</script>
</body>
</html>