1.Jquery创建表格

/**
 * 创建表格
 * @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);
}

 

附录 1：label和data的数据结构

//label.json
['事项编码','事项名称']

//data.json
[{"code":"44530200","name":"办理《计划生育情况证明》"},
{"code":"44530200","name":"申请《再生育一胎子女审批》"},
{"code":"44530200","name":"办理《符合政策生育一孩登记》"},
{"code":"44530200","name":"办理《流动人口婚育证明》"}]

2.Jquery填充表格数据

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

/**
*填充表格数据前提是：已经创建好了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列');
   
}

附录2 table.html

<table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr align="center" height="36" class="tr1">
                    <td class="td1">