js数据呈现案例

程序员文章站 2022-06-15 18:50:15

Document< ......</div> <div class="content"> <div> <div><!doctype html></div> <div><html lang="en"></div> <br><div><head></div> <div> <meta charset="utf-8"></div> <div> <meta name="viewport" content="width=device-width, initial-scale=1.0"></div> <div> <title>document</title></div> <div> <style></div> <div> table {</div> <div> width: 1000px;</div> <div> border-collapse: collapse;</div> <div> }</div> <br><div> td,</div> <div> th {</div> <div> border: 1px solid #000;</div> <div> text-align: center;</div> <div> }</div> <br><div> img {</div> <div> width: 50px;</div> <div> height: 50px;</div> <div> }</div> <div> </style></div> <div></head></div> <br><div><body></div> <div> <div id="divs"></div></div> <div> <script></div> <div> var data = [{</div> <div> checked: true,</div> <div> id: 1001,</div> <div> icon: "img/pic11.png",</div> <div> name: "餐饮0",</div> <div> num: 1,</div> <div> price: 10</div> <div> },</div> <div> {</div> <div> checked: true,</div> <div> id: 1002,</div> <div> icon: "img/pic12.png",</div> <div> name: "餐饮1",</div> <div> num: 2,</div> <div> price: 20</div> <div> },</div> <div> {</div> <div> checked: false,</div> <div> id: 1003,</div> <div> icon: "img/pic13.png",</div> <div> name: "餐饮2",</div> <div> num: 3,</div> <div> price: 30</div> <div> },</div> <div> {</div> <div> checked: true,</div> <div> id: 1004,</div> <div> icon: "img/pic14.png",</div> <div> name: "餐饮3",</div> <div> num: 4,</div> <div> price: 40</div> <div> },</div> <div> {</div> <div> checked: false,</div> <div> id: 1005,</div> <div> icon: "img/pic15.png",</div> <div> name: "餐饮4",</div> <div> num: 5,</div> <div> price: 50</div> <div> },</div> <div> {</div> <div> checked: true,</div> <div> id: 1006,</div> <div> icon: "img/pic16.png",</div> <div> name: "餐饮5",</div> <div> num: 6,</div> <div> price: 60</div> <div> },</div> <div> {</div> <div> checked: false,</div> <div> id: 1007,</div> <div> icon: "img/pic17.png",</div> <div> name: "餐饮6",</div> <div> num: 7,</div> <div> price: 70</div> <div> },</div> <div> {</div> <div> checked: false,</div> <div> id: 1008,</div> <div> icon: "img/pic18.png",</div> <div> name: "餐饮7",</div> <div> num: 8,</div> <div> price: 80</div> <div> },</div> <div> {</div> <div> checked: false,</div> <div> id: 1009,</div> <div> icon: "img/pic19.png",</div> <div> name: "餐饮8",</div> <div> num: 9,</div> <div> price: 90</div> <div> },</div> <div> {</div> <div> checked: true,</div> <div> id: 1010,</div> <div> icon: "img/pic20.png",</div> <div> name: "餐饮9",</div> <div> num: 10,</div> <div> price: 100</div> <div> }</div> <div> ];</div> <div> // 定义全局变量 cks all </div> <div> // cks用来获取所有的input标签all用来存储cks中的第一个input元素</div> <div> var cks;</div> <div> var all;</div> <br><div> // 调用初始函数</div> <div> init();</div> <br><div> function init() {</div> <div> // 定义divs获取文档中的div</div> <div> var divs = document.getelementbyid("divs");</div> <div> // 定义str为表格标签在结尾创建结束标签</div> <div> var str = "<table>";</div> <div> str = creathead(str);</div> <div> str = creattable(str);</div> <div> str += "</table>";</div> <div> // 在div中加入str 内容</div> <div> divs.innerhtml = str;</div> <div> // cks获取所有input标签并存储为列表</div> <div> cks = document.getelementsbytagname("input");</div> <div> // 将cks转换为数组</div> <div> cks = array.from(cks);</div> <div> // for循环给每个cks中的元素添加onclick函数</div> <div> for (var i = 0; i < cks.length; i++) {</div> <div> cks[i].onclick = clickhandle;</div> <div> }</div> <div> // all获取cks中第一个元素并且删除cks第一个元素</div> <div> all = cks.shift();</div> <div> }</div> <div> // 定义creattable函数for循环添加表格的行和列并且添加data的sum属性并计算sum</div> <div> function creattable(str) {</div> <div> for (var i = 0; i < data.length; i++) {</div> <div> var obj = data[i];</div> <div> data[i].sum = data[i].num * data[i].price;</div> <div> str += "<tr>";</div> <div> // 使用for in 遍历向每个单元格中添加内容</div> <div> for (var prop in obj) {</div> <div> str += "<td>";</div> <div> // 调用addelements函数用来添加数组</div> <div> str = addelements(str, prop, obj);</div> <div> str += "</td>";</div> <div> }</div> <div> str += "</tr>";</div> <div> }</div> <div> // 返回已经添加完内容的str；</div> <div> return str;</div> <div> }</div> <div> // 定义creathead 添加表格的表头</div> <div> function creathead(str) {</div> <div> str += "<tr>";</div> <div> // 额外添加表头标题sum</div> <div> data[0].sum = "sum";</div> <div> // for in 遍历data的第一个对象</div> <div> for (var prop in data[0]) {</div> <div> str += "<th>";</div> <div> // 设置当属性为checked时,将表头设置为input checkbox</div> <div> if (prop == "checked") {</div> <div> str += "<input type='checkbox'>";</div> <div> // 跳出循环</div> <div> continue;</div> <div> }</div> <div> str += prop;</div> <div> str += "</th>";</div> <div> }</div> <div> str += "</tr>";</div> <div> // 返回添加了表头的str</div> <div> return str;</div> <div> }</div> <div> // 定义addelements函数用来添加内容</div> <div> function addelements(str, prop, obj) {</div> <div> // 这里使用switch case的方法来对icon checked属性的内容分别设置</div> <div> // 如果是属性为icon那么将图片标签添加进去</div> <div> // 如果时chencked 将添加input checkbox标签</div> <div> switch (prop) {</div> <div> case "icon":</div> <div> str += "<img src=" + obj[prop] + ">";</div> <div> break;</div> <div> case "checked":</div> <div> str += "<input type='checkbox'" + (obj.prop ? "checked" : "") + ">";</div> <div> break;</div> <div> default:</div> <div> str += obj[prop];</div> <div> break;</div> <div> }</div> <div> // 返回设置好内容的str;</div> <div> return str;</div> <div> }</div> <div> // 定义函数clickhandle函数用来实现点击input时发生的事件</div> <div> function clickhandle() {</div> <div> // 如果当点击的元素为all(全选框)时</div> <div> // 遍历cks数组,并且将每一个元素的checked设置为all的checked</div> <div> if (this === all) {</div> <div> console.log(this);</div> <div> for (var prop in cks) {</div> <div> cks[prop].checked = all.checked;</div> <div> }</div> <div> } else {</div> <div> // 这里使用every方法来返回bool值</div> <div> // 如果cks中有一个元素的checked为flase 那么将返回false</div> <div> // 并且将flase赋值给all的checked</div> <div> all.checked = cks.every(function (prop) {</div> <div> return prop.checked;</div> <div> })</div> <div> }</div> <div> }</div> <div> </script></div> <div></body></div> <br><div></html></div> </div> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/1408003.html"> python time模块字符串和时间戳互转 </a> </p> <p> 下一篇： <a href="/article/1408005.html"> 10分钟学会Visual Studio将自己创建的类库打包到NuGet进行引用(net,net core,C#) </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2156951.html" target="_blank" title="js中json字符串转json对象的方法（提取json格式的数据）"> <h2> js中json字符串转json对象的方法（提取json格式的数据） </h2> </a> </li> <li> <a href="/article/2155411.html" target="_blank" title="Vue.js实现数据响应的方法"> <h2> Vue.js实现数据响应的方法 </h2> </a> </li> <li> <a href="/article/2154954.html" target="_blank" title="python3爬虫学习之数据存储txt的案例详解"> <h2> python3爬虫学习之数据存储txt的案例详解 </h2> </a> </li> <li> <a href="/article/2154022.html" target="_blank" title="js处理层级数据结构的方法小结"> <h2> js处理层级数据结构的方法小结 </h2> </a> </li> <li> <a href="/article/2153833.html" target="_blank" title="JS 在数组指定位置插入/删除数据的方法"> <h2> JS 在数组指定位置插入/删除数据的方法 </h2> </a> </li> <li> <a href="/article/2148979.html" target="_blank" title="java使用htmlunit工具抓取js中加载的数据"> <h2> java使用htmlunit工具抓取js中加载的数据 </h2> </a> </li> <li> <a href="/article/2148792.html" target="_blank" title="vue.js的双向数据绑定Object.defineProperty方法的神奇之处"> <h2> vue.js的双向数据绑定Object.defineProperty方法的神奇之处 </h2> </a> </li> <li> <a href="/article/2148360.html" target="_blank" title="JS数据拷贝"> <h2> JS数据拷贝 </h2> </a> </li> <li> <a href="/article/2147290.html" target="_blank" title="javascript验证form表单数据的案例详解"> <h2> javascript验证form表单数据的案例详解 </h2> </a> </li> <li> <a href="/article/2143090.html" target="_blank" title="js读取本地json文件数据（php和mysql网站模板）"> <h2> js读取本地json文件数据（php和mysql网站模板） </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>