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

高洛峰 2016-11-23 09:31 2272浏览原创

jquery创建表格

/**
 * 创建表格
 * @param label 标题
 * @param data 数据
 * @param tableElement html元素，表格插入至此元素中
 */function createTable(label, data, tableElement) {    //创建表格
    var table = $("

"); //也可以为元素对象设定id,class等属性. /*var 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.css({ border: "1px solid #d0d0d0", height: "30px", color: "#FFF", background: "#37b5ad" }); $.each(label, function (index, value) { var th = $(""); th.appendTo(tr); }); tr.appendTo(table); $.each(data, function (index, row) { //数据行 var tr = $(""); //数据列 $.each(row, function (key, value) { //console.info(key + ":" + value); var 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><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

" + value + "
" + value + "

第1列	第2列	第3列	第4列	第5列
第2行
第3行

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", {
                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%"]}