Jquery建立表格、填充表格數據、重置表格

1.Jquery建立表格

/**
 * 建立表格
 * @param label 標題
 * @param data 數據
 * @param tableElement html元素，表格插入至此元素中
 */
function createTable(label, data, tableElement) {
    //建立表格
    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(tableElement);
}

附：label和data的數據結構

//label.json
['事項編碼','事項名稱']

//data.json
[{"code":"44530200","name":"辦理《計劃生育狀況證實》"},
{"code":"44530200","name":"申請《再生育一胎子女審批》"},
{"code":"44530200","name":"辦理《符合政策生育一孩登記》"},
{"code":"44530200","name":"辦理《流動人口婚育證實》"}]

2.Jquery填充表格數據

function fill_table_data() {
        //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開始
        $("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列');
        $("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列');
   
}

填充表格數據前提是：已經建立好了html表格行列元素。

如：table.html

<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行第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>

3.Jquery添加(刪除)表格行列

多用於動態表格，即表格的數據行列非固定，ajax填充數據。

注意：由於這裏是重置表格，因此刪除了除第一行(表頭行)的全部行，而後再添加數據行。

//若是不刪除原表格數據，那麼只會追加新數據行，而不是覆蓋。

function rest_table_data() {
    
    var table = $("#tableId");
    //刪除原有表格數據
    table.find("tr").each(function(i){
        if(i != 0){
            //表頭不刪
            this.remove();
        }
    });

    //添加行列數據
    $.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);
        }
    });
}

附：table_data.json

//按列
{"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%"]}