javaScript 为对象型数组创建表格

实现过程

初始化函数

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

2、执行添加表头函数

3、执行添加表格部分

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

5、将str显示在页面div内

body实现代码

<code> 
/<code>

CSS实现代码

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

js实现代码

<code>//创建对象型数组，并为每个对象设置属性
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="<table>";
        //添加表格头部将执行完函数后的返回值赋予str
        str=createHead(str);
        //添加表格部分，将执行完函数后的返回值赋予str
        str=createTable(str);
        //添加table尾标签
        str+="/<table>";
        // 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;
}

    //定义添加表格函数，传入形参str
function createTable(str){
        //循环遍历数组
        for(var i=0;i<data.length>            //添加行标签
            str+="";
                //获取数组当前元素（对象）
                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;
}/<data.length>/<code>

閱讀更多 栗子紀 的文章

關鍵字: 变量 JavaScript 字符串