jquery 的增刪改查
阿新 • • 發佈：2019-01-28
<!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>