用原生js,将一个对象数组里面的数据渲染到一个表格中

1,522 阅读2分钟

对象数组为: var arr=[
{id:1001,name:"苹果IphoneX",price:6900,num:2,info:"最新的苹果手机"},
{id:1002,name:"小米10",price:3900,num:3,info:"最新的小米手机"}, {id:1003,name:"华为meta10",price:8900,num:4,info:"最新的华为手机"}, {id:1004,name:"锤子手机",price:1900,num:1,info:"最新的锤子手机"}, {id:1005,name:"三星手机",price:4900,num:2,info:"最新的三星手机"}, {id:1006,name:"vivo手机",price:2900,num:4,info:"最新的vivo手机"}, {id:1007,name:"魅族手机",price:1900,num:5,info:"最新的魅族手机"},
]

最后的渲染结果如下图所示:

函数部分:

function zhuanhuan(arr){//定义一个函数,将上面的arr对象数组转换为一个二维数组 
    var arr2=[];//先定义一个一维数组。
    for(var i=0;i<arr.length;i++){
    arr2[i]=Object.values(arr[i]);//将arr对象数组中的每一行通过Object.values方法取出来,然后再赋值给arr2这个一维数组,一次添加一组数据,
    //形成一个二维数组。本行代码不懂的话可以先查阅一下二维数组的定义和用法,和Object.values方法。
    }
    console.log(arr2.length);//在控制台打印,供查看数据是否复制过来了。
    return arr2;//将复制过后的数组传出来,供外部变量接收。
    }
    var arr3=zhuanhuan(arr);//定义一个变量,接收上个函数传出的数据。
         console.log(arr3);//打印试看数据是否正确
      function creatTable(arr){//定义这个打印表格的函数
               document.write("<table>")//首先在外围打印一个table标签
                for(var i=0;i<8;i++){
                    if(i===0){//打印第一行表头部分
                      document.write("<thead><tr><th>"+"id"+"</th><th>"+"name"+"</th><th>"+"price"+"</th><th>"+"num"+"</th><th>"+"info"+"</th></tr></thead>");
                    }
                    else{//打印tbody部分
                        var s=true;//定义一个变量,控制tbody标签打印一次。
                        if(s){//如果变量是true,则打印。
                            document.write("<tbody");
                            }
                            document.write("<tr>")//打印每一行的行标签前一半。
                        for(var b=0;b<5;b++){//循环打印每一个td标签,并将获取到的数据填充。
                             document.write("<td>"+arr[i-1][b]+"</td>")
                        }
                        document.write("</tr>")//打印每一行的行标签的另一半。
                        if(s){//由上面定义的s变量的值为true可知,打印一次tbody标签的后半部分。
                            document.write("</tbody")
                            s=false;//打印一次之后,将s变量的值设置为false,下一次循环就不再打印tbody标签。
                            }
                        
                    }
                }
                document.write("</table>")//打印标签的后半部分,与上面形成一组完整的标签。
         }
          creatTable(arr3);//调用函数生成表格。