Jquery创建表格、填充表格数据、重置表格

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&quo<b style="color:transparent">来源gao@!dai!ma.com搞$$代^@码网</b>t;,        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%"]}

喜欢 (0)赏

[搞代码]

分享 (0)