/**

 * 创建表格

 * @param label 标题 json格式，数据结构见附录1

 * @param data 数据 json格式，数据结构见附录1

 * @param parentElement html元素，表格插入至此元素中

 */

function createTable(label, data, parentElement) {

    //创建表格

    var table = $("<table> </table>");

    //也可以为元素对象设定id,class等属性.

    /*var table = $("<table>",{

                      "id"    : "tableId",

                      "class" : "table_class"

                   });*/

    //设定样式

    table.css({

        width: "98%",

        "border-collapse": "collapse",

        border: "0px solid #d0d0d0",

        margin: "3px",

        "font-size": "14px"

    });

    //标题行

    var tr = $("<tr></tr>");

    tr.css({

        border: "1px solid #d0d0d0",

        height: "30px",

        color: "#FFF",

        background: "#37b5ad"

    });

    $.each(label, function (index, value) {

        var th = $("<th>" + value + "</th>");

        th.appendTo(tr);

    });

    tr.appendTo(table);

    $.each(data, function (index, row) {

        //数据行

        var tr = $("<tr></tr>");

        //数据列

        $.each(row, function (key, value) {

            //console.info(key + ":" + value);

            var td = $("<td>" + value + "</td>");

            td.css({

                border: "1px solid #d0d0d0",

                height: "24px"

            });

            td.appendTo(tr);

        });

        tr.appendTo(table);

    });

    table.appendTo(parentElement);

}

createTable

//label.json

['事项编码','事项名称']

//data.json

[{"code":"44530200","name":"办理《计划生育情况证明》"},

{"code":"44530200","name":"申请《再生育一胎子女审批》"},

{"code":"44530200","name":"办理《符合政策生育一孩登记》"},

{"code":"44530200","name":"办理《流动人口婚育证明》"}]

/**

*填充表格数据前提是：已经创建好了html表格行列元素。

*

*如：第4行第5列不存在时，会出错。

*表格的html页面示例代码，见附录2.

*/

function fillTableData() {

        //table

        var table = $("#tableId");

        // 也可以通过嵌套了table的元素id获取table对象

        // 例如：<div id="contain_table_elementId"><table></table></div>

        //var table = $("#contain_table_elementId").find("table");

        // row cell 从1开始计数，第1行是表头，这里从第2行开始填充

        $("tr:nth-child(2) td:nth-child(2)", table).html('第2行第2列');

        $("tr:nth-child(2) td:nth-child(3)", table).html('第2行第3列');

        $("tr:nth-child(2) td:nth-child(4)", table).html('第2行第4列');

        $("tr:nth-child(2) td:nth-child(5)", table).html('第2行第5列');

        //第3行

        $("tr:nth-child(3) td:nth-child(2)", table).html('第3行第2列');

        $("tr:nth-child(3) td:nth-child(3)", table).html('第3行第3列');

        $("tr:nth-child(3) td:nth-child(4)", table).html('第3行第4列');

        $("tr:nth-child(3) td:nth-child(5)", table).html('第3行第5列');

        //第4行第5列不存在，你猜会发生什么?

        //$("tr:nth-child(4) td:nth-child(5)", table).html('第4行第5列');

}

<table width="100%" border="0" cellspacing="0" cellpadding="0">

                <tr align="center" height="36" class="tr1">

                    <td class="td1">第1列</td>

                    <td class="td1">第2列</td>

                    <td class="td1">第3列</td>

                    <td class="td1">第4列</td>

                    <td class="td1">第5列</td>

                </tr>

                <tr align="center" height="36">

                    <td>第2行</td>

                    <!-- td-第2行已创建，你可以为其填充数据 -->

                    <td></td>

                    <td></td>

                    <td ></td>

                    <td class="td2" ></td>

                </tr>

                <tr align="center" height="36">

                    <td>第3行</td>

                    <td ></td>

                    <td ></td>

                    <td ></td>

                    <td class="td2"></td>

                </tr>

</table>

table.html

function rest_table_data() {

    var table = $("#tableId");

    //删除原有表格行

    table.find("tr").each(function(i){

        if(i != 0){

            //表头不删

            this.remove();

        }

    });

    //添加行列数据,table_data.json 见附录3

    $.get('table_data.json', function (data) {

        // row cell 从1开始，因为明确知道数据是12行，所以i<12

        for (var i = 0; i < 12; i++) {

            //数据行

            var tr = $("<tr>", {

                align: "center",

                height: "36"

            });

            //数据列

            $.each(data, function (key, value) {

                var td = $("<td>" + value[i] + "</td>");

                td.appendTo(tr);

                if (key == "column_4") {

                    //这一列的数据，要指定样式

                    td.attr("class","td2");

                }

            });

            tr.appendTo(table);

        }

    });

}

//按列

{"column_1":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],

"column_2":[1858,2120,3466,3513,3829,3035,2934,2761,2576,1635,0,0],

"column_3":[0,0,1,46,86,69,102,82,118,61,0,0],

"column_4":[0,0,0,39,44,59,101,81,101,57,0,0],

"column_5":["0.0%","0.0%","0.0%","85.0%","51.0%","86.0%","99.0%","99.0%","86.0%","93.0%","0.0%","0.0%"]}

 <!-- 注意用tbody,不然会破坏表格样式 -->

            <tbody id="${rowId}" style="display: none" class="tableRow">

            <tr>

                <td valign="top" class="title">内容：</td>

                <td height="100" valign="top" colspan="4">

                    <textarea name="option" class="textarea" readonly="readonly">我这行需要隐藏</textarea>

                </td>

            </tr>

            </tbody>