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