<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
li {
list-style-type: none;
}
tr:nth-child(odd) {
background-color: gainsboro;
}
span {
color: red;
}
</style>
<script type="text/javascript">
$(function() {
//1.点击确定按钮,,,验证信息
$(".save").click(function() {
//1.0清空一下提示信息
$("span").html("");
//1.1获取到输入的内容
var name = $(".name").val();
var price = $(".price").val();
var num = $(".num").val();
//1.2进行验证
if(name.length < 2 || name.length > 20) {
$(".name_span").html("*商品名称不合法");
return;
}
if(price == undefined || price == "") {
$(".price_span").html("*商品价格不能为空");
return;
}
if(num <= 0) {
$(".num_span").html("*商品数量必须大于0");
return;
}
//验证合格
addTable();
//计算总价
getTotal();
})
//2.添加表格的函数
function addTable() {
//2.1获取到需要添加的值
var name = $(".name").val();
var price = $(".price").val();
var num = $(".num").val();
var type = $("select :selected").val();
var sum = price * num;
//2.2创建一个新的行(tr)
var new_tr = "<tr class='new_tr'>" +
"<td><input type='checkBox'/></td>" +
"<td>" + name + "</td>" +
"<td>" + price + "</td>" +
"<td>" + num + "</td>" +
"<td>" + type + "</td>" +
"<td>" + sum + "</td>" +
"<td><button onclick='del(this)'>删除</button></td>" +
"</tr>";
//2.3添加到表格中
$("table").append(new_tr);
//2.4重新计算总价
getTotal();
}
//3.全选
$(".selectAll").click(function() {
//3.1获取到所有的CheckBox
var checks = $(":checkBox");
checks.prop("checked", true);
})
//4.反选
$(".selectRevers").click(function() {
//3.1获取到所有的CheckBox
var checks = $(":checkBox");
checks.each(function() {
this.checked = !this.checked;
})
})
//7.批量删除
$(".delAll").click(function () {
//获取到所有选中的CheckBox
var ischk = $(":checkBox:checked");
ischk.each(function () {
$(this).parent().parent().remove();
})
getTotal();
});
})
//5.删除一行
function del(obj) {
$(obj).parent().parent().remove();
getTotal();
}
//计算总价
function getTotal() {
//初始化总价的变量
var total = 0;
var s = $(".new_tr :nth-child(6)");
s.each(function() {
var xiaoji = $(this).text();
total = total + parseFloat(xiaoji);
})
$(".stotal").html("商品总价:" + total + "¥");
}
</script>
</head>
<body>
<ul>
<li>商品名称:<input class="name" /><span class="name_span"></span></li>
<li>商品价格:<input class="price" /><span class="price_span"></span></li>
<li>商品数量:<input class="num" type="number" /><span class="num_span"></span></li>
<li>商品类型:
<select class="type">
<option>茶叶</option>
<option>咖啡</option>
</select>
</li>
<li><button class="save">确定</button></li>
</ul>
<button class="selectAll">全选</button>
<button class="selectRevers">反选</button>
<button class="delAll">批量删除</button>
<table border="1px" cellspacing="0" cellpadding="0" width="600px">
<tr style="background-color: grey;">
<td>编号</td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>商品类别</td>
<td>小计</td>
<td>删除</td>
</tr>
</table>
<p class="stotal">商品总价:0¥</p>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
li {
list-style-type: none;
}
tr:nth-child(odd) {
background-color: gainsboro;
}
span {
color: red;
}
</style>
<script type="text/javascript">
$(function() {
//1.点击确定按钮,,,验证信息
$(".save").click(function() {
//1.0清空一下提示信息
$("span").html("");
//1.1获取到输入的内容
var name = $(".name").val();
var price = $(".price").val();
var num = $(".num").val();
//1.2进行验证
if(name.length < 2 || name.length > 20) {
$(".name_span").html("*商品名称不合法");
return;
}
if(price == undefined || price == "") {
$(".price_span").html("*商品价格不能为空");
return;
}
if(num <= 0) {
$(".num_span").html("*商品数量必须大于0");
return;
}
//验证合格
addTable();
//计算总价
getTotal();
})
//2.添加表格的函数
function addTable() {
//2.1获取到需要添加的值
var name = $(".name").val();
var price = $(".price").val();
var num = $(".num").val();
var type = $("select :selected").val();
var sum = price * num;
//2.2创建一个新的行(tr)
var new_tr = "<tr class='new_tr'>" +
"<td><input type='checkBox'/></td>" +
"<td>" + name + "</td>" +
"<td>" + price + "</td>" +
"<td>" + num + "</td>" +
"<td>" + type + "</td>" +
"<td>" + sum + "</td>" +
"<td><button onclick='del(this)'>删除</button></td>" +
"</tr>";
//2.3添加到表格中
$("table").append(new_tr);
//2.4重新计算总价
getTotal();
}
//3.全选
$(".selectAll").click(function() {
//3.1获取到所有的CheckBox
var checks = $(":checkBox");
checks.prop("checked", true);
})
//4.反选
$(".selectRevers").click(function() {
//3.1获取到所有的CheckBox
var checks = $(":checkBox");
checks.each(function() {
this.checked = !this.checked;
})
})
//7.批量删除
$(".delAll").click(function () {
//获取到所有选中的CheckBox
var ischk = $(":checkBox:checked");
ischk.each(function () {
$(this).parent().parent().remove();
})
getTotal();
});
})
//5.删除一行
function del(obj) {
$(obj).parent().parent().remove();
getTotal();
}
//计算总价
function getTotal() {
//初始化总价的变量
var total = 0;
var s = $(".new_tr :nth-child(6)");
s.each(function() {
var xiaoji = $(this).text();
total = total + parseFloat(xiaoji);
})
$(".stotal").html("商品总价:" + total + "¥");
}
</script>
</head>
<body>
<ul>
<li>商品名称:<input class="name" /><span class="name_span"></span></li>
<li>商品价格:<input class="price" /><span class="price_span"></span></li>
<li>商品数量:<input class="num" type="number" /><span class="num_span"></span></li>
<li>商品类型:
<select class="type">
<option>茶叶</option>
<option>咖啡</option>
</select>
</li>
<li><button class="save">确定</button></li>
</ul>
<button class="selectAll">全选</button>
<button class="selectRevers">反选</button>
<button class="delAll">批量删除</button>
<table border="1px" cellspacing="0" cellpadding="0" width="600px">
<tr style="background-color: grey;">
<td>编号</td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>商品类别</td>
<td>小计</td>
<td>删除</td>
</tr>
</table>
<p class="stotal">商品总价:0¥</p>
</body>
</html>