Jquery中关于table元素的操作

炎欲天舞

发布时间：2017-08-04 15:40:43

|

1637人浏览过

|

来源于php中文网

原创

/**
 * 创建表格
 * @param label 标题 json格式，数据结构见附录1
 * @param data 数据 json格式，数据结构见附录1
 * @param parentElement html元素，表格插入至此元素中
 */
function createTable(label, data, parentElement) {
    //创建表格
    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(parentElement);
}
createTable
附录 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 fillTableData() {
        //table
        var table = $("#tableId");
        // 也可以通过嵌套了table的元素id获取table对象
        // 例如：
" + value + "
" + value + "

附录2 table.html

                

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

                    
第2行
                    
                    

                    

                    

                    

                
                

                    
第3行
                    

                    

                    

                    

                

table.html

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

多用于动态表格，即表格的数据行列非固定，ajax填充数据。

注意：因为这里是重置表格，所以删除了除第一行(表头行)的所有行，然后再添加数据行。

//如果不删除原表格table的行row和列cell，那么只会追加新数据行，而不是覆盖。

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

下载

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 = $("", {
                align: "center",
                height: "36"
            });
            //数据列
            $.each(data, function (key, value) {
                var td = $("" + value[i] + "");
                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%"]}

重点：Jquery隐藏表格行时，要使用标签包裹需要隐藏的

Html示例：

            
            
                内容：
                
                    我这行需要隐藏