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 字符串