<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?table {
?? ??? ??? ??? ?border: 1px solid #e9e9e9;
?? ??? ??? ??? ?border-collapse: collapse;
?? ??? ??? ??? ?border-spacing: 0;
?? ??? ??? ?}
?
?? ??? ??? ?td {
?? ??? ??? ??? ?padding: 8px 16px;
?? ??? ??? ??? ?border: 1px solid #e9e9e9;
?? ??? ??? ??? ?text-align: left;
?? ??? ??? ?}
?
?? ??? ??? ?td img {
?? ??? ??? ??? ?width: 50px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ?}
?
?? ??? ??? ?th {
?? ??? ??? ??? ?background-color: #f7f7f7;
?? ??? ??? ??? ?color: #5c6b77;
?? ??? ??? ??? ?font-weight: 600;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?圖書類型：<select id="xlxx" onchange="tslx()">
?? ??? ??? ?<option value="全部">全部</option>
?? ??? ??? ?<option value="科幻">科幻</option>
?? ??? ??? ?<option value="小說">小說</option>
?? ??? ??? ?<option value="文學(xué)">文學(xué)</option>
?? ??? ??? ?<option value="懸疑">懸疑</option>
?? ??? ?</select>
?? ??? ?<table border="0">
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<th><button type="button" style="border: 0;background-color: #f7f7f7;" id="qbxz"
?? ??? ??? ??? ??? ??? ?onclick="quanxuan ()">全選</button></th>
?? ??? ??? ??? ?<th>序號</th>
?? ??? ??? ??? ?<th>商品名</th>
?? ??? ??? ??? ?<th>書籍名</th>
?? ??? ??? ??? ?<th>分類</th>
?? ??? ??? ??? ?<th>價(jià)格</th>
?? ??? ??? ??? ?<th>購買數(shù)量</th>
?? ??? ??? ??? ?<th>操作</th>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr name="wx">
?? ??? ??? ??? ?<td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
?? ??? ??? ??? ?<td>1</td>
?? ??? ??? ??? ?<td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20180520083915_sMx82.jpeg"></td>
?? ??? ??? ??? ?<td>活著</td>
?? ??? ??? ??? ?<td>文學(xué)</td>
?? ??? ??? ??? ?<td><label name="jg">25</label></td>
?? ??? ??? ??? ?<td>
?? ??? ??? ??? ??? ?<button onclick="jia('num1')">+</button>
?? ??? ??? ??? ??? ?<label id="num1" name="num">1</label>
?? ??? ??? ??? ??? ?<button onclick="jian('num1')">-</button>
?? ??? ??? ??? ?</td>
?? ??? ??? ??? ?<td><button onclick="deletet(1)">移除</button></td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr name="kh">
?? ??? ??? ??? ?<td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
?? ??? ??? ??? ?<td>2</td>
?? ??? ??? ??? ?<td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20180520083916_8ntMr.jpeg"></td>
?? ??? ??? ??? ?<td>活著2</td>
?? ??? ??? ??? ?<td>科幻</td>
?? ??? ??? ??? ?<td><label name="jg">30</label></td>
?? ??? ??? ??? ?<td>
?? ??? ??? ??? ??? ?<button onclick="jia('num2')">+</button>
?? ??? ??? ??? ??? ?<label id="num2" name="num">1</label>
?? ??? ??? ??? ??? ?<button onclick="jian('num2')">-</button>
?? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ?<td><button onclick="deletet(2)">移除</button></td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr name="xs">
?? ??? ??? ??? ?<td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
?? ??? ??? ??? ?<td>3</td>
?? ??? ??? ??? ?<td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20191227173047_zrXxQ.jpeg"></td>
?? ??? ??? ??? ?<td>活著3</td>
?? ??? ??? ??? ?<td>小說</td>
?? ??? ??? ??? ?<td><label name="jg">35</label></td>
?? ??? ??? ??? ?<td>
?? ??? ??? ??? ??? ?<button onclick="jia('num3')">+</button>
?? ??? ??? ??? ??? ?<label id="num3" name="num">1</label>
?? ??? ??? ??? ??? ?<button onclick="jian('num3')">-</button>
?? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ?<td><button onclick="deletet(3)">移除</button></td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr name="xy">
?? ??? ??? ??? ?<td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
?? ??? ??? ??? ?<td>4</td>
?? ??? ??? ??? ?<td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20191227173048_eGeBA.jpeg"></td>
?? ??? ??? ??? ?<td>活著4</td>
?? ??? ??? ??? ?<td>懸疑</td>
?? ??? ??? ??? ?<td><label name="jg">40</label></td>
?? ??? ??? ??? ?<td>
?? ??? ??? ??? ??? ?<button onclick="jia('num4')">+</button>
?? ??? ??? ??? ??? ?<label id="num4" name="num">1</label>
?? ??? ??? ??? ??? ?<button onclick="jian('num4')">-</button>
?? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ?<td><button onclick="deletet(4)">移除</button></td>
?? ??? ??? ?</tr>
?
?? ??? ?</table>
?? ??? ?<h1 id="nr" style="display: none;">購物車為空！</h1>
?
?? ??? ?總金額：<label id="zh" style="color: red;">0</label>￥
?
?? ??? ?<img src="" style="width: 150px;" id="img">
?
?? ?</body>
?? ?
?? ?<script type="text/javascript">
?? ??? ?
?? ?</script>
?? ?<script src="../js/gwc.js" type="text/javascript" charset="utf-8"></script>
</html>

JavaScript：

/*
1.圖片懸浮時(shí)的放大
2.全選
3.分類
4.數(shù)值的加減
5.總和的實(shí)現(xiàn)
6.刪除功能
*/
?
// 1.圖片懸浮時(shí)的放大
?
// 圖片移入放大
function tpmax(lj) {
?? ?//移入 將獲取到的圖片路徑加載到下方顯示圖片路徑實(shí)現(xiàn)移入顯示
?? ?document.getElementById("img").src = lj
}
// 圖片移出隱藏
function tpmin() {
?? ?//移出 將空的圖片路徑加載到下方顯示圖片路徑實(shí)現(xiàn)移出不顯示
?? ?document.getElementById("img").src = "";
}
?
// 2.全選
function quanxuan() {
?? ?var qxaj = document.getElementsByClassName("qx");
?? ?// 遍歷判斷復(fù)選框的狀態(tài)
?? ?for (var i = 0; i < qxaj.length; i++) {
?? ??? ?if (qxaj[i].checked == true) {
?? ??? ??? ?for (var i = 0; i < qxaj.length; i++) {
?? ??? ??? ??? ?qxaj[i].checked = false;
?? ??? ??? ?}
?
?? ??? ?} else {
?? ??? ??? ?for (var i = 0; i < qxaj.length; i++) {
?? ??? ??? ??? ?qxaj[i].checked = true;
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ?zhjs();
}
?
// 3.分類
/*
1.只顯示分類的:將不屬于的分類隱藏，直顯示匹配的行
2.顯示與隱藏兩個(gè)方法
*/
function tslx() {
?? ?var xlxx = document.getElementById("xlxx").value;
?? ?var kh = document.getElementsByName("kh");
?? ?var xs = document.getElementsByName("xs");
?? ?var wx = document.getElementsByName("wx");
?? ?var xy = document.getElementsByName("xy");
?? ?if (xlxx == "全部") {
?? ??? ?xianshi(kh);
?? ??? ?xianshi(xs);
?? ??? ?xianshi(wx);
?? ??? ?xianshi(xy);
?? ?}
?? ?if (xlxx == "科幻") {
?? ??? ?xianshi(kh);
?? ??? ?yincang(xs);
?? ??? ?yincang(wx);
?? ??? ?yincang(xy);
?? ?}
?? ?if (xlxx == "文學(xué)") {
?? ??? ?yincang(kh);
?? ??? ?yincang(xs);
?? ??? ?xianshi(wx);
?? ??? ?yincang(xy);
?? ?}
?? ?if (xlxx == "小說") {
?? ??? ?yincang(kh);
?? ??? ?xianshi(xs);
?? ??? ?yincang(wx);
?? ??? ?yincang(xy);
?? ?}
?? ?if (xlxx == "懸疑") {
?? ??? ?yincang(kh);
?? ??? ?yincang(xs);
?? ??? ?yincang(wx);
?? ??? ?xianshi(xy);
?? ?}
}
?
// 顯示
function xianshi(xlxx) {
?? ?// 遍歷尋找匹配的值
?? ?for (var i = 0; i < xlxx.length; i++) {
?? ??? ?xlxx[i].style.visibility = "visible";
?? ?}
}
?
// 隱藏
function yincang(xlxx) {
?? ?for (var i = 0; i < xlxx.length; i++) {
?? ??? ?xlxx[i].style.visibility = "collapse";
?? ?}
}
?
?
// 4.數(shù)值的加減
function jian(numid) {
?? ?var num = document.getElementById(numid).innerHTML;
?? ?var ljnum = parseInt(num) - 1;
?? ?if (ljnum > 0) {
?? ??? ?document.getElementById(numid).innerHTML = ljnum;
?? ?}
?? ?zhjs();
}
?
function jia(numid) {
?? ?// 得到原始值
?? ?var num = document.getElementById(numid).innerHTML;
?? ?// 得到累加值
?? ?var ljnum = parseInt(num) + 1;
?? ?// 賦值
?? ?document.getElementById(numid).innerHTML = ljnum;
?? ?zhjs();
}
?
?
//5.總和計(jì)算
function zhjs() {
?? ?var jg = document.getElementsByName("jg");
?? ?var sl = document.getElementsByName("num");
?? ?var cb = document.getElementsByName("cb");
?? ?var sum = 0;
?? ?for (var i = 0; i < cb.length; i++) {
?? ??? ?if (cb[i].checked == true) {
?? ??? ??? ?sum += parseInt(jg[i].innerHTML) * parseInt(sl[i].innerHTML);
?? ??? ?}
?? ?}
?
?? ?document.getElementById("zh").innerHTML = sum;
}
?
?
// 6.刪除
?
// 遍歷全部tr
var s = 0;
var qbtr = document.getElementsByTagName("tr");
for (var i = 0; i < qbtr.length; i++) {
?? ?s++;
}
function deletet(index) {
?? ?// tr()
?? ?var c = document.getElementsByName("cb");
?? ?c[index - 1].checked = false;
?? ?var h = document.getElementsByTagName("tr");
?? ?h[index].style.display = "none";
?? ?s--;
?? ?if (s == 1) {
?? ??? ?document.getElementById("nr").style.display = "block";
?? ??? ?document.getElementById("cartb").style.display = "none";
?? ??? ?document.getElementById("stype").style.display = "none";
?? ?}
?? ?zhjs();
?
?
}

效果：

全選: