jQuery封装插件自动生成表格案例

最新推荐文章于 2025-05-30 09:00:09 发布

星月前端

最新推荐文章于 2025-05-30 09:00:09 发布

阅读量457

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记 javascript 文章标签： jquery javascript

本文链接：https://blog.youkuaiyun.com/qq_61950936/article/details/125056548

笔记同时被 2 个专栏收录

116 篇文章

订阅专栏

javascript

22 篇文章

订阅专栏

该博客展示了一段HTML代码，用于创建一个带有蓝色边框的简单表格。通过引入jQuery库和自定义的jQuery-bgc.js插件，动态地填充了表格内容，包括'序号'、'姓名'、'年龄'和'工资'等列。示例中展示了三行数据，分别对应'xy'、'wy'和'pp'三个条目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index部分代码：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        tr,
        th,
        td {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jQuery-bgc.js"></script>
<script>
    $(function() {
        $('div').table(['序号', '姓名', '年龄', '工资'], [{
            n: 'xy',
            age: 20,
            s: 10
        }, {
            n: 'wy',
            age: 20,
            s: 8
        }, {
            n: 'pp',
            age: 21,
            s: 12
        }]);
    });
</script>

jQuery-bgc.js部分代码：

(function($) {
    $.fn.table = function(tableh, tableb) {
        var list = [];
        list.push('<table>');
        //头部
        list.push('<thead>');
        for (var i = 0; i < tableh.length; i++) {
            list.push('<td>');
            list.push(tableh[i]);
            list.push('</td>');

        }
        list.push('</thead>');
        //body
        for (var i = 0; i < tableb.length; i++) {
            list.push('<tr>');
            list.push('<td>' + (i + 1) + '</td>');
            for (const key in tableb[i]) {
                list.push('<td>');
                list.push(tableb[i][key]);
                list.push('</td>');
            }
            list.push('</tr>');
        }
        list.push('</table>');
        this.html(list.join(''));
    };
}(jQuery));

生成表格如图：