zno2

html table 合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>归纳</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
        var iset = {1:1,2:2,3:3};
        function merg() {
            // 合并行
            for(k in iset){
                var trs = $(\'tr[lb_id=\'+k+\']\');
                var length = trs.length;
                $.each(trs,function (i,n) {
                    if(i == 0){
                        $(n).children(\':eq(0)\').attr(\'rowspan\',length);
                    }else{
                        $(n).children(\':eq(0)\').remove();
                    }
                });
            }

            // 增加序号
            var tds = $("td[rowspan]");
            $.each(tds,function (i,n) {
                var oldText = $(n).text();
                $(n).text((i+1) + \'.\' + oldText);
            })

            // 销毁button
            $(\'button\').remove();
        }

    </script>
</head>
<body>
<table border="1">
    <tr>
        <th>类别</th>
        <th>举例</th>
    </tr>
    <tr lb_id="1">
        <td>字母</td>
        <td>A</td>
    </tr>
    <tr lb_id="1">
        <td>字母</td>
        <td>B</td>
    </tr>
    <tr lb_id="1">
        <td>字母</td>
        <td>C</td>
    </tr>
    <tr lb_id="1">
        <td>字母</td>
        <td>D</td>
    </tr>
    <tr lb_id="1">
        <td>字母</td>
        <td>E</td>
    </tr>
    <tr lb_id="2">
        <td>数字</td>
        <td>1</td>
    </tr>
    <tr lb_id="2">
        <td>数字</td>
        <td>2</td>
    </tr>
    <tr lb_id="2">
        <td>数字</td>
        <td>3</td>
    </tr>
    <tr lb_id="3">
        <td>符号</td>
        <td>#</td>
    </tr>
    <tr lb_id="3">
        <td>符号</td>
        <td>*</td>
    </tr>
</table>
<button style="color: red;position: relative;top: 20px;" onclick="merg()">点击合并表格</button>
</body>
</html>

 

 

类别 举例
字母 A
字母 B
字母 C
字母 D
字母 E
数字 1
数字 2
数字 3
符号 #
符号 *

 

类别 举例
1.字母 A
B
C
D
E
2.数字 1
2
3
3.符号 #
*

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-11-25
  • 2021-08-16
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-11-11
  • 2021-06-27
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案