Jquery table元素操作-建立|資料填充|重設|隱藏行

標籤：填充   element   play   bsp   table   remove   for   log   情況   

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 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開始計數，第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">第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>

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

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

注意：因為這裡是重設表格，所以刪除了除第一行(表頭行)的所有行，然後再添加資料行。

//如果不刪除原表格table的行row和列cell，那麼只會追加新資料行，而不是覆蓋。

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);        }    });}

附錄3  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%"]}

4.Jquery隱藏表格行

重點：Jquery隱藏表格行時，要使用<tbody></tbody>標籤包裹需要隱藏的<tr></tr>，不然會破壞樣式。

Html樣本：

 <!-- 注意用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>

Jquery樣本：敬請期待

未完，待續...

Jquery table元素操作-建立|資料填充|重設|隱藏行