jquery实现表格复杂表头

最新推荐文章于 2024-10-16 10:24:54 发布

風缘

最新推荐文章于 2024-10-16 10:24:54 发布

阅读量4.6k

点赞数 1

分类专栏： jquery插件 jquery javascript 文章标签：表格 js复杂表头表头分组

本文链接：https://blog.csdn.net/liangrongliu1991/article/details/80321089

版权

本文介绍如何使用jQuery处理树形数组来生成带有复杂表头的表格，涉及递归处理、colspan和rowspan的设定，以及两种不同的实现方法，以解决多层表头的显示问题。

摘要由CSDN通过智能技术生成

先上图：
这里写图片描述

目前在做一个表格插件，表格的表头是根据一个数组生成，如果只是普通的单层表头很容易实现，但是如果是复杂的表头，就要挺麻烦的，主要是我的数组结构是树形数组，实现需要递归，递归过程要考虑到<th> 的 colspan和rowspan 的设置，我自己对递归也不是很懂，只能慢慢摸索。

其实自己手写一个复杂的表头也不难，自己就先写一个简单的找规律：

<table class="table table-bordered">
        <thead>
            <tr>
                <th colspan="1" rowspan="4">姓名</th>
                <th colspan="1" rowspan="4">年龄</th>
                <th colspan="6" rowspan="1">爱好</th>
            </tr>
        <tr>
            <th colspan="2" rowspan="1">看书</th>
            <th colspan="4" rowspan="1">打球</th>
        </tr>
            <tr>
                <th colspan="1" rowspan="2">名著</th>
                <th