问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

根据id相同，table表格动态合并

头像
gaochenyang
    68360104
    <table width="20%" border="1" cellspacing="0" cellpadding="0" id="tab">
        <thead>
            <tr>
                <th>选项</th>
                <th>id</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            
        </thead>
        <tbody>
            <tr>
                <th><input type="checkbox"/></th>
                <th>1</th>
                <th>男</th>
                <th>18</th>
            </tr>
            <tr>
                <th><input type="checkbox"/></th>
                <th>1</th>
                <th>男</th>
                <th>28</th>
            </tr>
            <tr>
                <th><input type="checkbox"/></th>
                <th>2</th>
                <th>男</th>
                <th>20</th>
            </tr>
            <tr>
                <th><input type="checkbox"/></th>
                <th>3</th>
                <th>女</th>
                <th>25</th>
            </tr>
        </tbody>
    </table>

    图片描述

    期望结果：
    图片描述

    javascriptecmascript-6htmlhtml5
    阅读 4.4k
    5 个回答
    得票最新
    头像
    画师的星空
      818139

      这个问题比较复杂

      你的是前端分页还是后端分页?

      你指的是前端来合并还是后端传给你的时候就已经合并好了的？

      前端合并单元格很简单，你百度一下 table rowspan

      头像
      我可是兔子
        36911234

        解决思路使用rowspan进行合并
        具体代码如下：

        <table width="20%" border="1" cellspacing="0" cellpadding="0" id="tab">
    <thead>
        <tr>
            <th>选项</th>
            <th>id</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        
    </thead>
    <tbody>
        <tr>
            <th rowspan="2"><input type="checkbox"/></th>
            <th rowspan="2">1</th>
            <th rowspan="2">男</th>
            <th>18</th>
        </tr>
        <tr>
            <th>18</th>
        </tr>
        <tr>
            <th><input type="checkbox"/></th>
            <th>2</th>
            <th>男</th>
            <th>20</th>
        </tr>
        <tr>
            <th><input type="checkbox"/></th>
            <th>3</th>
            <th>女</th>
            <th>25</th>
        </tr>
    </tbody>
</table>
        头像
        DavidWangDong
          62417

          那你得给出你的json数据结构啊,是不是你从服务器获取的数据然后渲染的？

          讲个大概思路哈
          我感觉你应该先把所有数据全部提取出来
          类似这样

          [[{id:1,name:'...'},{id:1,name:'...'}],{id:2,name:'...'}]

然后去重新拼接table
          头像
          gaochenyang
            68360104

            <!DOCTYPE html>
            <html>

            <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
         td.hide {
            display: none
        }
    </style>
</head>
<body>
    <table width="20%" border="1" cellspacing="0" cellpadding="0" id="tb">
        <thead>
            <tr>
                <td>选项</td>
                <td>id</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
            
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"/><span>1</span></td>
                <td>1</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox"/><span>1</span></td>
                <td>1</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td><input type="checkbox"/><span>2</span></td>
                <td>2</td>
                <td>男</td>
                <td>20</td>
            </tr>
            <tr>
                <td><input type="checkbox"/><span>3</span></td>
                <td>3</td>
                <td>女</td>
                <td>25</td>
            </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>

        var tb = document.getElementById('tb'),
            rowscount = tb.rows.length,
            cellcount = rowscount > 0 ? tb.rows[0].cells.length : 0,
            innerHTML, rowspan, startRow;
        for(var j = 0; j < cellcount; j++) {
            startRow = 0;
            innerHTML = tb.rows[startRow].cells[j].innerHTML
            rowspan = 1;
            for(var i = 1; i < rowscount; i++) {
                if(tb.rows[i].cells[j].innerHTML == innerHTML && (j == 0 || i < startRow + parseInt(tb.rows[startRow].cells[0].getAttribute('rowspan') || 0))) {
                    rowspan++;
                    tb.rows[i].cells[j].className = 'hide';
                } else {
                    if(rowspan > 1) tb.rows[startRow].cells[j].setAttribute('rowspan', rowspan);

                    startRow = i;
                    innerHTML = tb.rows[i].cells[j].innerHTML
                    rowspan = 1
                }
            }
            if(rowspan > 1) tb.rows[startRow].cells[j].setAttribute('rowspan', rowspan);
        }
        $('tbody tr').children('td:first-child').find('input').siblings().html('')
    </script>
</body>

            </html>

            头像
            北堂棣
              6.6k94268

              这个问题，使用模板语言会比较好做些，我这里用的是Juicer 模板引擎，例子如下：

              <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table width="20%" border="1" cellspacing="0" cellpadding="0" id="tab">
        <thead>
            <tr>
                <th>选项</th>
                <th>id</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>

        </thead>
        <tbody id="tbody">
            <!-- <tr>
                <th><input type="checkbox" /></th>
                <th>1</th>
                <th>男</th>
                <th>18</th>
            </tr>
            <tr>
                <th><input type="checkbox" /></th>
                <th>1</th>
                <th>男</th>
                <th>28</th>
            </tr>
            <tr>
                <th><input type="checkbox" /></th>
                <th>2</th>
                <th>男</th>
                <th>20</th>
            </tr>
            <tr>
                <th><input type="checkbox" /></th>
                <th>3</th>
                <th>女</th>
                <th>25</th>
            </tr> -->
        </tbody>
    </table>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/juicer.js"></script>
    <script>

        function table_html(data) {
            var tpl = [
                '{@each content as it, k}',
                '<tr>',
                '{@if it.age.length==0}',
                '   <td><input type="checkbox"/></td>',
                '   <td>${it.id}</td>',
                '   <td>${it.sex}</td>',
                '{@else}',
                '   <td rowspan="${it.age.length}"><input type="checkbox"/></td>',
                '   <td rowspan="${it.age.length}">${it.id}</td>',
                '   <td rowspan="${it.age.length}">${it.sex}</td>',
                '{@/if}',
                '   <td>${it.age[0]}</td>',
                '</tr>',
                '{@if it.age.length>=2}',
                '   {@each it.age as it2, j}',
                '{@if j!=0}',
                '<tr>',
                '   <td>${it2}</td>',
                '</tr>',
                '{@/if}',
                '   {@/each}',
                '{@/if}',
                '{@/each}',
            ].join("\n");
            return juicer(tpl, data);
        }

        //假如后端获取到的数据是下面这样的格式：（如果不是，你可以自己写个循环拼成这样，或者让后端改一下返回的数据格式）
        var data = {
            content: [
                { id: 1, sex: '男', age: [18, 28] },
                { id: 2, sex: '男', age: [20] },
                { id: 3, sex: '女', age: [25] },
            ]
        };
        var htl = table_html(data);
        $('#tbody').html(htl);
    </script>
</body>

</html>

              效果如图：
              图片描述

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题
              宣传栏