jQuery 根据JSON数据动态生成表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>动态创建表格</title>
    <script src="js/jQuery1.10.js"></script>
    <script type="text/javascript">


        function CreateTable() {
            var str = '{ "total": 149, "columns": [{ "field": "EMPLOYEEID", "title": "员工编号" }, { "field": "EMPLOYEENAME", "title": "员工姓名" }],"rows":[{"EMPLOYEEID":"001","EMPLOYEENAME":"小明"},{"EMPLOYEEID":"002","EMPLOYEENAME":"小宏"}]}';
            var data = JSON.parse(str);
            var rowCount = data.rows.length;
            var cellCount = data.columns.length;

            var table = $("<table border="1">");
            table.appendTo($("#createtable"));
            
            var trHeader = $("<tr></tr>");
            trHeader.appendTo(table);
            for (var j = 0; j < cellCount; j++) {
                var td = $("<td>" + data.columns[j].title + "</td>");
                td.appendTo(trHeader);
            }

            for (var i = 0; i < rowCount; i++) {
                var tr = $("<tr></tr>");
                tr.appendTo(table);
                for (var j = 0; j < cellCount; j++) {
                    var field = data.columns[j].field;
                    var val="";
                    if (data.rows[i][field] != null)
                    {
                        val = data.rows[i][field];
                    }

                    var td = $("<td>" + val + "</td>");
                    td.appendTo(tr);
                }
            }
            $("#createtable").append("</table>");
        }
    </script>
</head>

<body>
    <input type="button" value="添加表格" onclick="CreateTable(5,6)">
    <input type="button" value="添加行">
    <div id="createtable"></div>
    <div id="createrow"></div>
</body>
</html>

相关阅读:
第十一节 1虚拟路径简单
第十一节 4Server对象简单
第十节 19验证码案例简单
第十节 19爆力注册简单
第十节 23行删除例子讲解请求处理响应简单
第十节 18暴力破解及机器人注册原理简单
第十一节 2Request对象简单
礼物
笔记本电脑与漂亮老婆
一场傻B的晚会

原文地址：https://www.cnblogs.com/volts0302/p/5258777.html