js 数组头部添加_javaScript 为对象型数组创建表格

实现过程

初始化函数

1、定义字符串变量str，初始值为"

2、执行添加表头函数

3、执行添加表格部分

4、字符串变量添加table尾标签"

"

5、将str显示在页面div内

body实现代码

CSS实现代码

table{      border-collapse: collapse;      width: 1000px;}td,th{      text-align: center;      border: 1px solid #000000;}img{      width: 20px;      height: 20px;}

js实现代码

//创建对象型数组，并为每个对象设置属性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: 1, price: 20 },        {checked:false, id: 1003, icon: "img/pic13.png", name: "餐饮2", num: 1, price: 30 },        {checked:true, id: 1004, icon: "img/pic14.png", name: "餐饮3", num: 1, price: 40 },        {checked:false, id: 1005, icon: "img/pic15.png", name: "餐饮4", num: 1, price: 50 },        {checked:true, id: 1006, icon: "img/pic16.png", name: "餐饮5", num: 1, price: 60 },        {checked:false, id: 1007, icon: "img/pic17.png", name: "餐饮6", num: 1, price: 70 },        {checked:false, id: 1008, icon: "img/pic18.png", name: "餐饮7", num: 1, price: 80 },        {checked:false, id: 1009, icon: "img/pic19.png", name: "餐饮8", num: 1, price: 90 },        {checked:true, id: 1010, icon: "img/pic20.png", name: "餐饮9", num: 1, price: 100 }];        //   对象型数组创建表格    //执行初始化函数init();    //定义初始化函数function init(){        //定义字符串初始值为table前标签，之后str字符串内容全部添加完成后，直接在页面中插入字符串        var str="

"; //添加表格头部将执行完函数后的返回值赋予str str=createHead(str); //添加表格部分，将执行完函数后的返回值赋予str str=createTable(str); //添加table尾标签 str+=""; // console.log(str); //str显示在页面div标签内 var divs=document.getElementById("divs"); divs.innerHTML=str;} //定义创建表格头部函数function createHead(str){ //首先添加行标签，加至str str+=""; //获取数组内第一个对象并赋值给obj var obj=data[0]; //循环遍历第一个对象里的属性 for(var prop in obj){ //添加表头th前标签 str+=""; //循环遍历到checked属性，就直接添加一个input标签，这里暂不完成全选功能 if(prop==="checked"){ str+="" }else{ //否则将直接添加属性名 str+=prop; } //添加表头尾标签 str+=""; } //添加行标签尾标签 str+=""; //将添加完表头的str返回 return str;} //定义添加表格函数，传入形参strfunction createTable(str){ //循环遍历数组 for(var i=0;i"; //获取数组当前元素(对象) var obj=data[i]; //循环遍历当前对象 for(var prop in obj){ //为表格添加单元格标签 str+=""; // str+=obj[prop]; // 执行这个方法就是给一个td中添加内容 // str就是当前单元格到现在位置的所有字符串 // prop当前单元格对于的那个属性名 // obj是当前单元格相对这个对象 str=addElement(str,prop,obj); str+=""; } str+=""; } return str;} //定义单元格添加内容函数function addElement(str,prop,obj){ //判断对象里的属性属于哪一种类型 switch(prop){ //如果是icon属性，为单元格添加图片 case "icon": str+="" break; //如果是checked属性，添加input标签类型为checkbox,根据数组内对象checked属性值判断input是否选中 case "checked": str+="" break; //如果不是上述两种属性，则添加对应属性值 default: str+=obj[prop]; } //将添加后的str返回 return str;}