Jquery table元素操作-创建|数据填充|重置|隐藏行

web开发作者:dayu日期:10天前点击:4
*/ //设定样式 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+ 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,不然会破坏表格样式 -->
            <tbodyclass="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元素操作-创建|数据填充|重置|隐藏行

原文地址:http://www.cnblogs.com/svili/p/7235622.html


下一篇       上一篇