<!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(""); var price = $(".price").val(); var name = $(".name").val(); //1.1 Get the input
var num = $(".num").val();
//1.2 to verify
if(name.length < 2 || name.length > 20) {
$(".name_span").html("*Product name Illegal");
return;
}
if(price == undefined || price == "") {
$(".price_span").html("*Product price cannot be empty");
return;
}
if(num < = 0) {
$(".num_span").html("*The number of items must be greater than 0");
return;
}
//Validate qualified
addTable();
//Calculate the total price
getTotal();
})
//2. Function
addTable() {
//2.1 Get the value that needs to be added
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(); //4. Invert selection }) checks.prop("checked", true) ; var checks = $(":checkBox"); //3.1 Get all CheckBox $(".selectAll").click(function() { //3. Select all
}
$(".selectRevers").click(function() {
//3.1 Get all CheckBox
var checks = $(":checkBox");
checks.each(function() {
this.checked = !this.checked;
})
})
//7. Batch delete
$(".delAll").click(function () {
//Get all selected CheckBox
var ischk = $(":checkBox:checked");
ischk.each(function () {
$(this).parent().parent().remove();
})
getTotal();
});
})
//5. delete a line
function del(obj) {
$(obj).parent( ).parent().remove();
getTotal();
}
//calculate the total price
function getTotal() {
//initialize the variable of the total price
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">Select All</button>
<button class="selectRevers">Deselect</button>
<button class="delAll">Delete in batches</button>
<table border="1px" cellspacing= "0" cellpadding="0" width="600px">
<tr style="background-color: grey;">
<td>number</td>
<td>item name</td>
<td>item price< /td>
<td>Item Quantity</td>
<td>Item Category</td>
<td>Subtotal</td>
<td>Delete</td>
</tr>
</table>
<p class= "stotal">Total price: 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(""); var price = $(".price").val(); var name = $(".name").val(); //1.1 Get the input
var num = $(".num").val();
//1.2 to verify
if(name.length < 2 || name.length > 20) {
$(".name_span").html("*Product name Illegal");
return;
}
if(price == undefined || price == "") {
$(".price_span").html("*Product price cannot be empty");
return;
}
if(num < = 0) {
$(".num_span").html("*The number of items must be greater than 0");
return;
}
//Validate qualified
addTable();
//Calculate the total price
getTotal();
})
//2. Function
addTable() {
//2.1 Get the value that needs to be added
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(); //4. Invert selection }) checks.prop("checked", true) ; var checks = $(":checkBox"); //3.1 Get all CheckBox $(".selectAll").click(function() { //3. Select all
}
$(".selectRevers").click(function() {
//3.1 Get all CheckBox
var checks = $(":checkBox");
checks.each(function() {
this.checked = !this.checked;
})
})
//7. Batch delete
$(".delAll").click(function () {
//Get all selected CheckBox
var ischk = $(":checkBox:checked");
ischk.each(function () {
$(this).parent().parent().remove();
})
getTotal();
});
})
//5. delete a line
function del(obj) {
$(obj).parent( ).parent().remove();
getTotal();
}
//calculate the total price
function getTotal() {
//initialize the variable of the total price
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">Select All</button>
<button class="selectRevers">Deselect</button>
<button class="delAll">Delete in batches</button>
<table border="1px" cellspacing= "0" cellpadding="0" width="600px">
<tr style="background-color: grey;">
<td>number</td>
<td>item name</td>
<td>item price< /td>
<td>Item Quantity</td>
<td>Item Category</td>
<td>Subtotal</td>
<td>Delete</td>
</tr>
</table>
<p class= "stotal">Total price: 0¥</p>
</body>
</html>