鍍金池/ 問答/HTML5  HTML/ 根據(jù)id相同，table表格動態(tài)合并

根據(jù)id相同，table表格動態(tài)合并

<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>

圖片描述

期望結(jié)果：
圖片描述

回答
編輯回答
九年囚

<!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>

2018年7月25日 10:58
編輯回答
別硬撐

解決思路使用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>
2017年7月27日 16:19
編輯回答
夢若殤

這個問題比較復(fù)雜

你的是前端分頁還是后端分頁?

你指的是前端來合并還是后端傳給你的時候就已經(jīng)合并好了的？

前端合并單元格很簡單，你百度一下 table rowspan

2017年5月28日 06:03
編輯回答
故人嘆

這個問題，使用模板語言會比較好做些，我這里用的是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);
        }

        //假如后端獲取到的數(shù)據(jù)是下面這樣的格式：（如果不是，你可以自己寫個循環(huán)拼成這樣，或者讓后端改一下返回的數(shù)據(jù)格式）
        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>

效果如圖：
圖片描述

2017年9月12日 11:39
編輯回答
傻丟丟

那你得給出你的json數(shù)據(jù)結(jié)構(gòu)啊,是不是你從服務(wù)器獲取的數(shù)據(jù)然后渲染的？

講個大概思路哈
我感覺你應(yīng)該先把所有數(shù)據(jù)全部提取出來
類似這樣

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

然后去重新拼接table
2017年4月25日 04:14