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.符号 #
*

posted on 2016-08-05 18:16  zno2  阅读(520)  评论(0编辑  收藏  举报

导航