初探原生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);
}

动态生成table