<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
// 根据数据创建表格(作业3效果图), 并实现删除按钮的删除功能
var str = "小米手机@1500@黑色@0.5kg @2#华为手机@1698@蓝色@0.45kg @3#iphoneX@7899@红色@0.6kg@7";
// 裁切字符串成二维数组
var arr = str.split("#");
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].split("@");
}
// 得到数据
console.log(arr);
// 初始字符串
var eleStr = '<table border="1" cellspacing="0" cellpadding="10"><tr> <td class="all"><input type="checkbox"></td> <td>名称</td><td>单价</td><td>颜色</td><td>重量</td><td>减少</td><td>数量</td><td>增加</td><td>总价</td><td>操作</td></tr>'
// 遍历二维数组, 创建表格
for (var i = 0; i < arr.length; i++) {
// 有几个子数组就创建几行
eleStr += "<tr>";
// 在行的开头插入复选框
eleStr += "<td><input type='checkbox'></td>";
// 遍历子数组 会执行5次
for (var j = 0; j < arr[i].length; j++) {
// 数量
if (j == 4) {
eleStr += "<td>-</td>";
eleStr += "<td> <input type='text' value='" + 2 + "' style='width:20px;'> </td>";
eleStr += "<td>+</td>";
} else {
eleStr += "<td>" + arr[i][j] + "</td>";
}
}
// 给当前行加上总价
eleStr += "<td>" + (arr[i][1] * arr[i][4]) + "</td>";
// 给当前行加上删除按钮
eleStr += "<td>删除</td>";
eleStr += "</tr>";
}
eleStr += "</table>";
// 把字符串插入到页面上
box.innerHTML = eleStr;
// 给每一行tr添加类名
var tr = document.querySelectorAll("tr"); //nodeList
tr.forEach(function (ele, i) {
console.log(ele); // tr
// 第一行 tr 不需要添加类名
if(i != 0){
ele.querySelector("td:nth-of-type(1)").className = "checked";
ele.querySelector("td:nth-of-type(3)").className = "price";
ele.querySelector("td:nth-of-type(7)").className = "number";
ele.querySelector("td:nth-of-type(9)").className = "totle";
ele.querySelector("td:nth-of-type(10)").className = "delete";
// 减少增加
// ele.querySelector("td:nth-of-type(6)").className = "reduce"
// ele.querySelector("td:nth-of-type(8)").className = "add"
ele.querySelector("td:nth-of-type(6)").className = "btn";
ele.querySelector("td:nth-of-type(8)").className = "btn";
}
})
// 添加类名以后, 实现 减少/增加 按钮的功能
var btn = document.querySelectorAll(".btn"); // 减少增加按钮
// 实现 减少/增加 按钮的功能
for(var i=0; i<btn.length; i++){
// 节点也是对象 对象可以添加属性, 用来记录下标
btn[i].abc = i;
// 给每一个元素绑定点击事件
btn[i].onclick = function(){
// console.log(this.abc);
// 获取当前按钮的父元素
var parent = this.parentElement;
// 获取单价
var price = parent.querySelector(".price");
// 获取数量
var number = parent.querySelector(".number>input"); // 输入框
// 总价
var totle = parent.querySelector(".totle");
// 根据下标, 决定数量加减, 改变商品数量
if(this.abc % 2 == 0){
number.value = --number.value < 1 ? 1 : number.value;
}else{
number.value++
}
// 修改商品数量以后, 重新计算总价
totle.textContent = number.value * price.textContent;
}
}
// 实现删除的功能
var del = document.querySelectorAll(".delete");
for(var i=0; i<del.length; i++){
del[i].onclick = function(){
this.parentNode.parentNode.removeChild(this.parentNode);
// 每次点击删除按钮, 需要重新判断是否全选
hasCheckAll();
}
}
// 全选按钮的功能
var allCheck = document.querySelector(".all>input");
// 全选按钮的点击事件
allCheck.onclick = function(){
// 每次点击都要 重新获取当前的复选框
var checked = document.querySelectorAll(".checked>input");
// 循环所有复选框
for(var i=0; i<checked.length; i++){
// 给所有的复选框状态 等于 全选按钮的状态
checked[i].checked = this.checked;
}
}
// 单独的复选按钮的功能
var check_btn = document.querySelectorAll(".checked>input");
// 给复选按钮绑定点击事件
for(var i=0; i<check_btn.length; i++){
check_btn[i].onclick = function(){
// 每次点击复选框, 需要重新判断是否全选
hasCheckAll();
}
}
// 判断是否全选的函数
function hasCheckAll(){
// 重新获取所有的复选框 (避免有一些被删除)
var ipt = document.querySelectorAll(".checked>input");
// 假设现在是全选的
var flag = true;
// 每次点击都要循环所有的复选框, 判断所有复选框的状态
for(var j=0; j<ipt.length;j++){
// 如果当前的复选框未选中
if(ipt[j].checked == false){
// 假设不成立
flag = false;
break;
}
}
// 如果长度为0
if(ipt.length == 0){
// 全选不选中
allCheck.checked = false;
}else{
// 根据flag的状态决定是否全选
allCheck.checked = flag;
}
}
</script>
</body>
</html>
搞这么复杂？这肯定有别的方式实现这个吧