JSON对象处理成表格（使用jQuery）

Posted 2021-04-08 菜鸟程序的日常

        菜鸟之前介绍了用javascript制作表格，在使用过程中，一般会请求后台页返回一个json字符串，然后在前台转成json对象再处理，但我并不想每次要个表格每次都写那段代码。今天就写一个通用的函数，传入两个参数，参数一是字符串数组类型，用以填充表格的表头，参数二传入json对象，最后返回一个table表格。

        

$(function () {
            $.ajax(
                {
                    method: "post",
                    url: "/index.ashx",
                    success: function (data)
                    {
                        if (data == "" && data.length==0)
                        {
                            return;
                        }
                        var json = eval("(" + data + ")")
                        var thArr = ["姓名", "年龄", "班级"];
                        var tbl = changeJsonToTbl(thArr,json);
                        $("body").append(tbl);
                    }
                }
            );
        });

        function changeJsonToTbl(thArr,json)
        {
            var tbl = $("<table></table>");
            tbl.attr("id", "jsonTbl");
            var thRow = $("<tr></tr>");
            tbl.append(thRow);
            for (var k = 0; k < thArr.length;k++)
            {
                var th = $("<td></td>")
                th.attr("class", "th")
                th.html(thArr[k])
                thRow.append(th);
            }
            for (var i = 0; i < json.length; i++)
            {
                var tr = $("<tr></tr>");
                tbl.append(tr);
                for(var j in json[i])
                {
                    var td = $("<td></td>");
                    td.html(json[i][j]);
                    tr.append(td);
                }
            }
            return tbl;
        }

---------------------------后台页：index.ashx-----------------------------------

-----------------------结果------------------------------------------