<!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 { width: 1000px; border-collapse: collapse; }
td, th { border: 1px solid #000; text-align: center; }
img { width: 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="https://www.cnblogs.com/ylc927957/p/ + 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/127968.html
標籤：JavaScript