初探原生js根據json數據動態創建table

小生以實習生的職位進入了一家非純軟件的公司做asp.net開發，大半個月下來發現公司里居然沒有前端工程師，這令我很詫異，跟着公司做項目，發現前端后台沒有明顯的分工，使用傳統的WebFrom開發模式，一個Button都要返回服務器處理一次，服務器說它覺得很累。

而我最近由於公司有很多很緊急的任務交給我，所以之前說的那個個人博客暫停了一下。由於我想盡量減輕服務器負擔，盡量讓一些邏輯在瀏覽器端完成，瀏覽器端與服務器之間僅有數據交換，盡可能地把邏輯留給瀏覽器端處理。顯然，js的強大之處就顯示出來了——當然，使用jquery框架也不錯，但是我希望使用原生js，這樣能達到深入理解的效果。

我的目的是根據服務器端返回的json數據來動態生成一個table，二話不說，馬上上代碼，代碼里也有注釋，相信各位看官能看懂。

/*
createTable(toid, jsondata, check, edit, del)：用於動態創建table，第0行為表頭，數據里必須包含表頭和數據的id
@toid：創建table到id為toid的節點下
@jsondata：用於創建table的json格式的數據（須在jsondata里包含表頭標題）
@check：是否創建查看按鈕
@edit：是否創建編輯按鈕
@del：是否創建刪除按鈕
*/
function createTable(toid, jsondata, check, edit, del) {
    var table = document.createElement("table");
    var tr, td;
    for (i in jsondata) {
        tr = document.createElement("tr");               //創建tr
        //________________創建表頭________________________________________
        if (i == 0) {                                                           
            for (j in jsondata[i]) {                                      //根據數據在tr內創建td
                td = document.createElement("td");
                td.appendChild(document.createTextNode(jsondata[i][j]));
                if (j == "id") {                                                   //創建隱藏的td來存放id
                    td.style.display = "none";
                }
                td.style.background = "#C1DAD7";              //設置表頭顏色
                tr.appendChild(td);
            }
            if (check == true) {                                                 //創建查看按鈕
                td = document.createElement("td");
                td.appendChild(document.createTextNode("查看"));
                td.style.background = "#C1DAD7";              //設置表頭顏色
                tr.appendChild(td);
            }
            if (edit == true) {                                              //創建編輯按鈕
                td = document.createElement("td");
                td.appendChild(document.createTextNode("編輯"));
                td.style.background = "#C1DAD7";          //設置表頭顏色
                tr.appendChild(td);
            }
            if (del == true) {                                                 //創建刪除按鈕
                td = document.createElement("td");
                td.appendChild(document.createTextNode("刪除"));
                td.style.background = "#C1DAD7";         //設置表頭顏色
                tr.appendChild(td);
            }
        }
        //________________創建數據行________________________________________
        else {                                                                    
            for (j in jsondata[i]) {                                      //根據數據在tr內創建td
                td = document.createElement("td");
                td.appendChild(document.createTextNode(jsondata[i][j]));
                if (j == "id") {                                              //創建隱藏的td來存放id
                    td.style.display = "none";
                }
                tr.appendChild(td);
            }
            if (check == true) {                                          //創建查看按鈕
                td = document.createElement("td");
                var btnCheck = document.createElement("button");
                btnCheck.appendChild(document.createTextNode("查看"));
                td.appendChild(btnCheck);
                tr.appendChild(td);
            }
            if (edit == true) {                            //創建編輯按鈕
                td = document.createElement("td");
                var btnEdit = document.createElement("button");
                btnEdit.appendChild(document.createTextNode("編輯"));
                td.appendChild(btnEdit);
                tr.appendChild(td);
            }
            if (del == true) {                             //創建刪除按鈕
                td = document.createElement("td");
                var btnDel = document.createElement("button");
                btnDel.appendChild(document.createTextNode("刪除"));
                td.appendChild(btnDel);
                tr.appendChild(td);
            }
        }
        table.appendChild(tr);
    }
    document.getElementById(toid).appendChild(table);
}

這是我定義的一個js方法，怎么調用也在開頭有說明，必須傳入json格式的數據，否則出錯。

下面再給這個table定義一個樣式，使它看起來好看一些。

table
{
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}

td
{
    border: 1px solid #009999;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
    text-align: center;
}

td button
{
    font-size:12px;
}

好了，現在我們做一個demo測試一下它的效果，為了簡單起見，我就不寫服務器端返回json數據了，直接在瀏覽器端定義一個json格式的數據，也把js和css全寫在html頁面上（不推薦這種做法，這里只是為了簡單起見）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table
        {
            padding: 0;
            margin: 0;
            border-collapse: collapse;
        }
        
        td
        {
            border: 1px solid #009999;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
            text-align: center;
        }
        
        td button
        {
            font-size: 12px;
        }
    </style>
    <script type="text/javascript">
        /*
        createTable(toid, jsondata, check, edit, del)：用於動態創建table，第0行為表頭，數據里必須包含表頭和數據的id
        @toid：創建table到id為toid的節點下
        @jsondata：用於創建table的json格式的數據（須在jsondata里包含表頭標題）
        @check：是否創建查看按鈕
        @edit：是否創建編輯按鈕
        @del：是否創建刪除按鈕
        */
        function createTable(toid, jsondata, check, edit, del) {
            var table = document.createElement("table");
            var tr, td;
            for (i in jsondata) {
                tr = document.createElement("tr");               //創建tr
                //________________創建表頭________________________________________
                if (i == 0) {
                    for (j in jsondata[i]) {                                      //根據數據在tr內創建td
                        td = document.createElement("td");
                        td.appendChild(document.createTextNode(jsondata[i][j]));
                        if (j == "id") {                                                   //創建隱藏的td來存放id
                            td.style.display = "none";
                        }
                        td.style.background = "#C1DAD7";              //設置表頭顏色
                        tr.appendChild(td);
                    }
                    if (check == true) {                                                 //創建查看按鈕
                        td = document.createElement("td");
                        td.appendChild(document.createTextNode("查看"));
                        td.style.background = "#C1DAD7";              //設置表頭顏色
                        tr.appendChild(td);
                    }
                    if (edit == true) {                                              //創建編輯按鈕
                        td = document.createElement("td");
                        td.appendChild(document.createTextNode("編輯"));
                        td.style.background = "#C1DAD7";          //設置表頭顏色
                        tr.appendChild(td);
                    }
                    if (del == true) {                                                 //創建刪除按鈕
                        td = document.createElement("td");
                        td.appendChild(document.createTextNode("刪除"));
                        td.style.background = "#C1DAD7";         //設置表頭顏色
                        tr.appendChild(td);
                    }
                }
                //________________創建數據行________________________________________
                else {
                    for (j in jsondata[i]) {                                      //根據數據在tr內創建td
                        td = document.createElement("td");
                        td.appendChild(document.createTextNode(jsondata[i][j]));
                        if (j == "id") {                                              //創建隱藏的td來存放id
                            td.style.display = "none";
                        }
                        tr.appendChild(td);
                    }
                    if (check == true) {                                          //創建查看按鈕
                        td = document.createElement("td");
                        var btnCheck = document.createElement("button");
                        btnCheck.appendChild(document.createTextNode("查看"));
                        td.appendChild(btnCheck);
                        tr.appendChild(td);
                    }
                    if (edit == true) {                            //創建編輯按鈕
                        td = document.createElement("td");
                        var btnEdit = document.createElement("button");
                        btnEdit.appendChild(document.createTextNode("編輯"));
                        td.appendChild(btnEdit);
                        tr.appendChild(td);
                    }
                    if (del == true) {                             //創建刪除按鈕
                        td = document.createElement("td");
                        var btnDel = document.createElement("button");
                        btnDel.appendChild(document.createTextNode("刪除"));
                        td.appendChild(btnDel);
                        tr.appendChild(td);
                    }
                }
                table.appendChild(tr);
            }
            document.getElementById(toid).appendChild(table);
        }
    </script>
    <script type="text/javascript">
        var testData = eval("([{\"No\":\"序號\",\"name\":\"姓名\",\"gender\":\"性別\",\"age\":\"年齡\"},{\"No\":\"1\",\"name\":\"小五毛\",\"gender\":\"男\",\"age\":\"22\"},{\"No\":\"2\",\"name\":\"中五毛\",\"gender\":\"女\",\"age\":\"18\"},{\"No\":\"3\",\"name\":\"大五毛\",\"gender\":\"男\",\"age\":\"20\"}])");
        window.onload = function () {
            createTable("data", testData, true, true, true);
        }
    </script>
</head>
<body>
    <div id="data">
    </div>
</body>
</html>

這里有一個要注意的地方，你可以選擇使用jquery來解釋json數據，使用jquery.parseJSON()對數據格式的要求比較高，必須符合json格式；如果使用原生js的話，必須使用eval()這個方法，eval()的速度非常快，但是他可以編譯以及執行任何javaScript程序，所以會存在安全問題。在使用eval()時，來源必須是值得信賴的。需要使用更安全的json解析器。在服務器不嚴格的編碼在json或者如果不嚴格驗證的輸入，就有可能提供無效的json或者載有危險的腳本，在eval()中執行腳本，釋放惡意代碼。

另外，親測暫時不兼容ie7版本以下的瀏覽器，支持ie8以上以及chrome、firefox瀏覽器。有興趣的看官可以修改一下，讓它兼容ie7以下的瀏覽器。

小生初出茅廬，對世界充滿太多好奇，自身能力也充滿各種空缺，寫得不好還望指出。如有好的修改建議，請告知一聲，大家共同進步。