<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
1000px;
border-collapse: collapse;
}
td,
th {
border: 1px solid #000;
text-align: center;
}
img {
50px;
height: 50px;
}
</style>
</head>
<body>
<div id="divs"></div>
<script>
var data = [{
checked: true,
id: 1001,
icon: "img/pic11.png",
name: "餐饮0",
num: 1,
price: 10
},
{
checked: true,
id: 1002,
icon: "img/pic12.png",
name: "餐饮1",
num: 2,
price: 20
},
{
checked: false,
id: 1003,
icon: "img/pic13.png",
name: "餐饮2",
num: 3,
price: 30
},
{
checked: true,
id: 1004,
icon: "img/pic14.png",
name: "餐饮3",
num: 4,
price: 40
},
{
checked: false,
id: 1005,
icon: "img/pic15.png",
name: "餐饮4",
num: 5,
price: 50
},
{
checked: true,
id: 1006,
icon: "img/pic16.png",
name: "餐饮5",
num: 6,
price: 60
},
{
checked: false,
id: 1007,
icon: "img/pic17.png",
name: "餐饮6",
num: 7,
price: 70
},
{
checked: false,
id: 1008,
icon: "img/pic18.png",
name: "餐饮7",
num: 8,
price: 80
},
{
checked: false,
id: 1009,
icon: "img/pic19.png",
name: "餐饮8",
num: 9,
price: 90
},
{
checked: true,
id: 1010,
icon: "img/pic20.png",
name: "餐饮9",
num: 10,
price: 100
}
];
// 定义全局变量 cks all
// cks用来获取所有的input标签all用来存储cks中的第一个input元素
var cks;
var all;
// 调用初始函数
init();
function init() {
// 定义divs获取文档中的div
var divs = document.getElementById("divs");
// 定义str为表格标签在结尾创建结束标签
var str = "<table>";
str = creatHead(str);
str = creatTable(str);
str += "</table>";
// 在div中加入str 内容
divs.innerHTML = str;
// cks获取所有input标签 并存储为列表
cks = document.getElementsByTagName("input");
// 将cks转换为数组
cks = Array.from(cks);
// for循环 给每个cks中的元素添加onclick函数
for (var i = 0; i < cks.length; i++) {
cks[i].onclick = clickHandle;
}
// all获取cks中第一个元素 并且删除cks第一个元素
all = cks.shift();
}
// 定义creattable函数for循环添加表格的行和列 并且添加data的sum属性 并计算sum
function creatTable(str) {
for (var i = 0; i < data.length; i++) {
var obj = data[i];
data[i].sum = data[i].num * data[i].price;
str += "<tr>";
// 使用for in 遍历向每个单元格中添加内容
for (var prop in obj) {
str += "<td>";
// 调用addelements函数 用来添加数组
str = addELements(str, prop, obj);
str += "</td>";
}
str += "</tr>";
}
// 返回 已经添加完内容的str；
return str;
}
// 定义creathead 添加表格的表头
function creatHead(str) {
str += "<tr>";
// 额外添加表头标题sum
data[0].sum = "sum";
// for in 遍历data的第一个对象
for (var prop in data[0]) {
str += "<th>";
// 设置当属性为checked时,将表头设置为input checkbox
if (prop == "checked") {
str += "<input type='checkbox'>";
// 跳出循环
continue;
}
str += prop;
str += "</th>";
}
str += "</tr>";
// 返回添加了表头的str
return str;
}
// 定义addelements函数用来添加内容
function addELements(str, prop, obj) {
// 这里使用switch case的方法来对icon checked属性的内容分别设置
// 如果是属性为icon那么将图片标签添加进去
// 如果时chencked 将添加input checkbox标签
switch (prop) {
case "icon":
str += "<img src=" + obj[prop] + ">";
break;
case "checked":
str += "<input type='checkbox'" + (obj.prop ? "checked" : "") + ">";
break;
default:
str += obj[prop];
break;
}
// 返回设置好内容的str;
return str;
}
// 定义函数clickhandle函数用来实现点击input时发生的事件
function clickHandle() {
// 如果当点击的元素为all(全选框)时
// 遍历cks数组,并且将每一个元素的checked设置为all的checked
if (this === all) {
console.log(this);
for (var prop in cks) {
cks[prop].checked = all.checked;
}
} else {
// 这里使用every方法来返回bool值
// 如果cks中有一个元素的checked为flase 那么将返回false
// 并且将flase赋值给all的checked
all.checked = cks.every(function (prop) {
return prop.checked;
})
}
}
</script>
</body>
</html>