Jquery creates tables, fills table data, and resets tables-PHP开发-php.cn

Jquery creates tables, fills table data, and resets tables

高洛峰

Release： 2016-11-23 09:31:08

Original

2150 people have browsed it

Jquery creates a table

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

Copy after login

Attached: the data structure of label and data

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

Copy after login

2. Jquery fills the table data

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(&#39;第2行第2列&#39;);
        $("tr:nth-child(2) td:nth-child(3)", table).html(&#39;第2行第3列&#39;);
        $("tr:nth-child(2) td:nth-child(4)", table).html(&#39;第2行第4列&#39;);
        $("tr:nth-child(2) td:nth-child(5)", table).html(&#39;第2行第5列&#39;);
        $("tr:nth-child(3) td:nth-child(2)", table).html(&#39;第3行第2列&#39;);
        $("tr:nth-child(3) td:nth-child(3)", table).html(&#39;第3行第3列&#39;);
        $("tr:nth-child(3) td:nth-child(4)", table).html(&#39;第3行第4列&#39;);
        $("tr:nth-child(3) td:nth-child(5)", table).html(&#39;第3行第5列&#39;);     
         //第4行第5列不存在，你猜会发生什么?
        //$("tr:nth-child(4) td:nth-child(5)", table).html(&#39;第4行第5列&#39;);
            }

Copy after login

The premise of filling the table data is: the html table row and column elements have been created.

For example: 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>

Copy after login

3. Jquery adds (delete) table rows and columns

Mostly used for dynamic tables, that is, the data rows and rows of the table are not fixed, and ajax fills the data.

Note: Because the table is reset here, all rows except the first row (header row) are deleted and then the data rows are added.

//If the original table data is not deleted, new data rows will only be appended instead of overwritten.

function rest_table_data() {
    
    var table = $("#tableId");
    //删除原有表格数据
    table.find("tr").each(function(i){
        if(i != 0){
            //表头不删
            this.remove();
        }
    });

    //添加行列数据
    $.get(&#39;table_data.json&#39;, 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);
        }
    });
}

Copy after login

Attached: 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%"]}

Copy after login