表格代码 <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> <thead> <tr> <th>姓名 </th> <th>性别 </th> <th>年龄</th> <th>科目</th> <th>分数</th> </tr> </thead> <tbody> <tr> <td>张三 </td> <td>男 </td> <td>22 </td> <td>数学 </td> <td>90 </td> </tr> <tr> <td>张三 </td> <td>男 </td> <td>22 </td> <td>数学 </td> <td>90 </td> </tr> <tr> <td>张三 </td> <td>女 </td> <td>22 </td> <td>语文 </td> <td>70 </td> </tr> <tr> <td>张三 </td> <td>女 </td> <td>22 </td> <td>英语 </td> <td>60 </td> </tr> <tr> <td>李四 </td> <td>女 </td> <td>22 </td> <td>数学 </td> <td>60 </td> </tr> <tr> <td>李四 </td> <td>女 </td> <td>19 </td> <td>语文 </td> <td>60 </td> </tr> <tr> <td>王五 </td> <td>男 </td> <td>19 </td> <td>英语 </td> <td>60 </td> </tr> <tr> <td>王五 </td> <td>男 </td> <td>19 </td> <td>英语 </td> <td>60 </td> </tr> <tr> <td>王五 </td> <td>男 </td> <td>19 </td> <td>英语 </td> <td>60 </td> </tr> </tbody> </table> <script> window.onload=function(){ tablecols("tab",4); } function tablecols(id,endrows) { var trs = document.getElementById('tab').getElementsByTagName('tbody')[0].rows; var count = 1; var count2 = 1; var beginrows = 0; for (var j = 0; j < endrows; j++) { if(j==0) { for (var i = 0; i < trs.length; i++) { if (i == 0) { var tds = trs[0].cells[j].innerHTML; continue; } if (trs[i].cells[j].innerHTML == tds) { ++count; if (i == trs.length - 1) { if (count >= 2) { var b = i + 1; dealwith(trs, b, count, j); count = 1; } } } else { if (count >= 2) { dealwith(trs, i, count, j); count = 1; } tds = trs[i].cells[j].innerHTML; } }}else { for (var n = 0; n < trs.length;) { var rowspan = trs[n].cells[j - 1].getAttribute('rowspan'); if (n == 0) { var tds = trs[0].cells[j].innerHTML; } if (rowspan) { for (var m = 0; m < rowspan; m++) { if (trs[n].cells[j].innerHTML == tds) { ++count2; if(n==0){--count2} if (n == trs.length - 1) { if (count2 >= 2) { var b = n + 1; dealwith(trs, b, count2, j); count2 = 1; } } } else { if (count2 >= 2) { dealwith(trs, n, count2, j); count2 = 1; } tds = trs[n].cells[j].innerHTML; } n++; } rowspan = null; tds=null; }else{ ++n } } } } } function dealwith(trs,i,count,j){ for (var k = i-1; k > i - count; k--) { trs[k].cells[j].style.display = "none"; } trs[i - count].cells[j].rowSpan = count; } </script> 运行 下面的js主要实现表格横向的合并的功能,感觉这一句话讲完就结束了,加上图应该就能看懂 使用方法:tablecols("tab",4); 第一个参数为所引用表格的id,4表示合并到第几行 实行原理:表格第一列先进行合并;第二列开始后面的每一个都受前面的rowspan的值影响;将后面的列数的rowspan受限于rowspan html代码引用 姓名 性别 年龄 科目 分数 张三 男 22 数学 90 张三 男 22 数学 90 张三 女 22 语文 70 张三 女 22 英语 60 李四 女 22 数学 60 李四 女 19 语文 60 王五 男 19 英语 60 王五 男 19 英语 60 王五 男 19 英语 60