简易的动态生成表格和分页效果(原创)

// 获取实际输入的内容项

for (var real_row = 0; real_row < td.length; real_row += col - 1) {
    td_arr.push(td.slice(real_row, real_row + col));
}

table.js 实际输入这里 需要这样改  不然渲染的有问题

一个页面里有多个分页时没法多个使用？

一脸懵逼啊。LZ这坑有点大的。评论中修改的setContent方法，少数据运行一点问题都没有。但是数据量大的时候就会卡死。

内容置空的处理中，多次循环了。后面内容的赋值，不需要在构造html的循环里面。

// 内容置空
for (var y = 0; y < row; y++) {
    var tr = $("<tr>");
    $(tr).appendTo(table);
    for (var x = 0 + (col * y); x < col * (y + 1); x++) {
        $("<td>" + " " + "</td>").appendTo(tr);
    }
    $("</tr>").appendTo(table);
}
// 设置序号
for (var i = 0; i < row; i++) {
    $("#re tr:eq(" + i + ") td:eq(0)").text(i + 1);
}
// 设置内容
for (var r = 0; r < td_arr.length; r++) {
    for (var c = 1; c <= col; c++) {
        $("#re tr:eq(" + r + ") td:eq(" + c + ")").text(td_arr[r][c - 1]);
    }
}

郁金香小杰0
2016/12/9 15:12:29
您好 这个怎么调用ajax

请问一下，

$(document).Table('.table_body','re',51,4,['序号','姓名','年龄','出生地'],[[,,],[,,],[,,]]);

中，最后添加内容这里，怎么修改内容，你的js里面

setContent = function() {
    var td = new Array();
    // $.each(content, function(i, item){
    // 	$.each(item,function(j,val){
    // 		td.push(val);								
    // 	});				
    // });	
    for (var y = 0; y < row; y++) {
        var tr = $("<tr>");
        $(tr).appendTo(table);
        for (var x = 0 + (col * y); x < col * (y + 1); x++) {
            $("<td>" + " " + "</td>").appendTo(tr);
        }
        $("</tr>").appendTo(table);
        // 璁剧疆搴??
        for (var i = 0; i < row; i++) {
            $("#re tr:eq(" + i + ") td:eq(0)").text(i + 1);
        }
    }

};

怎么修改呢？

暴躁1
2016/10/11 15:10:00

感谢提问，刚刚发现这个版本的内容设置的地方有BUG，在js中改正如下

setContent = function() {
    var td = new Array();
    var td_arr = new Array();
    $.each(content,
    function(i, item) {
        $.each(item,
        function(j, val) {
            td.push(val);
            if (td[x] == null) td[x] = " ";
        });
    });
    // 获取实际输入的内容项
    for (var real_row = 0; real_row < td.length; real_row += col) {
        td_arr.push(td.slice(real_row, real_row + col));
    }
    // 内容置空
    for (var y = 0; y < row; y++) {
        var tr = $("<tr>");
        $(tr).appendTo(table);
        for (var x = 0 + (col * y); x < col * (y + 1); x++) {
            $("<td>" + " " + "</td>").appendTo(tr);
        }
        $("</tr>").appendTo(table);
        // 设置序号
        for (var i = 0; i < row; i++) {
            $("#re tr:eq(" + i + ") td:eq(0)").text(i + 1);
        }
        // 设置内容
        for (var r = 0; r < td_arr.length; r++) {
            for (var c = 1; c <= col; c++) {
                $("#re tr:eq(" + r + ") td:eq(" + c + ")").text(td_arr[r][c - 1]);
            }
        }
    }
};

IT小蜗牛0
2016/10/20 10:10:28
你好，我把内容写上去，但实际显示的时候会出现错位， 如我内容这么设置$(document).Table('.table_body','re',6,4,['序号','项目1','项目2','项目3'],[[11,12,13],[21,22,23],[31,32,33],[41,42,43],[51,52,53],[61,62,63]]);显示的时候是这样的请问这是哪里出了问题？

IT小蜗牛0
2016/10/20 10:10:43
无法粘贴图片。。。上面显示出来是这样的：序号项目1项目2项目31111213222233133341424515253562636

IT小蜗牛0
2016/10/20 10:10:42
序号  项目1  项目2  项目3 1          11      12        132          22      23       313          33      41       424          51      52       535          62      636