实现表格的分组效果


谁能帮我实现下，网上的单元格合并那些不满足这个需求，如果写好了 ，分全部奉送！！

解决方案 »

  1.   

    <table id="tab1" width="200" border="1" >
      <tr>
        <td >a</td>
        <td>x1</td>
        <td>1</td>
      </tr>
      <tr>
         
        <td>a</td>
        <td>x1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>a</td>
        <td>x2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>b</td>
        <td>x3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>c</td>
        <td>x4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>d</td>
        <td>x5</td>
        <td>6</td>
      </tr>
    </table>
    <script>
    //rowspan="3"
    //tabId:表ID,colId:要合并的列ID 从0开始
    function mergeCell(tabId,colId  ){
    var rs=document.getElementById(tabId).rows,ac,acv;
    for(var r=0;r<rs.length;r++){
    var c=rs[r].cells[colId];
    if(acv!=c.innerText){
    acv=c.innerText
    ac=c;
    }else{
    ac.rowSpan=(ac.rowSpan||0)+1;
    c.parentNode.removeChild(c);
    }
     
    }
     
    }
    //
    mergeCell('tab1',0);
     
    </script>
      

  2.   

    你真是个“牛人”啊，小弟佩服！！！从网上DOWN的代码吧？给你截图看看你的效果
    你看看mergeCell('tab1',0);
    mergeCell('tab1',1);
    自己看看为什么第二列没有合并？？是我的调用方式有问题？mergeCell('tab1',0);
    mergeCell('tab1',1);
    mergeCell('tab1',2);
    还是倒过来
    mergeCell('tab1',2);
    mergeCell('tab1',1);
    mergeCell('tab1',0);
    纯粹是不求甚解，没看我的需求！
      

  3.   

    从网上DOWN的代码吧,汗 你其它地方有看到过?我赶着下班前帮你写出来容易麻我
    我只写个例子提出思路
    好吧还是按你要求改了下<table id="tab1" width="200" border="1" >
      <tr>
        <td >a</td>
        <td>x1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>a</td>
        <td>x1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>a</td>
        <td>x2</td>
        <td>1</td>
      </tr>
      <tr>
        <td>b</td>
        <td>x3</td>
        <td>1</td>
      </tr>
      <tr>
        <td>c</td>
        <td>x4</td>
        <td>2</td>
      </tr>
      <tr>
        <td>d</td>
        <td>x5</td>
        <td>2</td>
      </tr>
    </table>
    <script>
        //tabId:表ID 
        function mergeCell(tabId){
            var tb=document.getElementById(tabId),rs=tb.rows,ac,acv;
            if(!rs.length) return;
            for(var i=0,L=rs[0].cells.length;i<L;i++){
            for(var r=0;r<rs.length;r++){
                var cs=rs[r].cells, c=cs[i];
                if( !ac|| (c.innerHTML!=ac.innerHTML ) ){
                    ac=c;
                }else{
                 if(getP(c) == getP(ac)){
      ac.rowSpan=(ac.rowSpan||0)+1;
                    c.isDel=true;
                 }
                }
            }
            }
            function getP(el){
             while( (el=el.previousSibling) && (el.tagName!='TD') );
             return el?el.innerHTML:'';
            }
            var tds=tb.getElementsByTagName('td'),i=tds.length;
            while(i--)tds[i].isDel&&tds[i].parentNode.removeChild(tds[i]); 
        }
        mergeCell('tab1');
    </script>
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表格相同内容合并</title>
    </head>
     
    <body>
    合并前：
    <table width="400" border="1">
      <tr>
        <td>a</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>a</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>
      </tr>
      <tr>
        <td>a</td>
        <td>2</td>
        <td>3</td>
        <td>3</td>
        <td>4</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>b</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>
        <td>7</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>b</td>
        <td>3</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>cc</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>cc</td>
        <td>2</td>
        <td>3</td>
        <td>5</td>
        <td>5</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>d</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>e</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>&nbsp;</td>
      </tr>
    </table><br />
    合并后：<br />
    <table width="400" border="1" id="table1">
      <tr>
        <td>a</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>a</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>
      </tr>
      <tr>
        <td>a</td>
        <td>2</td>
        <td>3</td>
        <td>3</td>
        <td>4</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>b</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>
        <td>7</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>b</td>
        <td>3</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>cc</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>cc</td>
        <td>2</td>
        <td>3</td>
        <td>5</td>
        <td>5</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>d</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>e</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    <script type="text/javascript"> 
    var rowsCount;
    var colCount;
    function mc1(tableId){
    var tb = document.getElementById(tableId);
    rowsCount = tb.rows.length;
    colCount = tb.rows[0].cells.length;
    var startRow = 0;
    for(var i=0; i<rowsCount-1; i++){
    if(tb.rows[startRow].cells[0].innerHTML == tb.rows[i+1].cells[0].innerHTML){
    tb.rows[i+1].removeChild(tb.rows[i+1].cells[0]);
    tb.rows[startRow].cells[0].rowSpan=(tb.rows[startRow].cells[0].rowSpan|0)+1;
    }else{
    mc(tableId,startRow,i,1);
    startRow=i+1;
    }
    }
    }
    function mc(tableId,startRow,endRow,col){
    var tb = document.getElementById(tableId);
    if(col >= tb.rows[0].cells.length){
    return;
    }
    var x=false;
    for(var i=startRow; i<endRow; i++){
    if(tb.rows[startRow].cells[col].innerHTML == tb.rows[i+1].cells[0].innerHTML){
    tb.rows[i+1].removeChild(tb.rows[i+1].cells[0]);
    tb.rows[startRow].cells[col].rowSpan=(tb.rows[startRow].cells[col].rowSpan|0)+1;
    if(i == endRow-1){
    mc(tableId,startRow,endRow,col+1);
    }
    }else{
    mc(tableId,startRow,i+0,col+1);
    startRow=i+1;
    }
    }
    }
    mc1('table1');
    </script>
      

  5.   


    脚本有点问题,更改下:
    [code=javascript]<script type="text/javascript">
    var rowsCount;
    var colCount;
    function mc1(tableId){
    var tb = document.getElementById(tableId);
    rowsCount = tb.rows.length;
    colCount = tb.rows[0].cells.length;
    var startRow = 0;
    for(var i=0; i<rowsCount-1; i++){
    if(tb.rows[startRow].cells[0].innerHTML == tb.rows[i+1].cells[0].innerHTML){
    tb.rows[i+1].removeChild(tb.rows[i+1].cells[0]);
    tb.rows[startRow].cells[0].rowSpan=(tb.rows[startRow].cells[0].rowSpan|0)+1;
    if(i+2 == rowsCount){
    mc(tableId,startRow,i+1,1);
    }
    }else{
    mc(tableId,startRow,i,1);
    startRow=i+1;
    }
    }
    }
    function mc(tableId,startRow,endRow,col){
    var tb = document.getElementById(tableId);
    if(col >= tb.rows[0].cells.length){
    return;
    }
    var x=false;
    for(var i=startRow; i<endRow; i++){
    if(tb.rows[startRow].cells[col].innerHTML == tb.rows[i+1].cells[0].innerHTML){
    tb.rows[i+1].removeChild(tb.rows[i+1].cells[0]);
    tb.rows[startRow].cells[col].rowSpan=(tb.rows[startRow].cells[col].rowSpan|0)+1;
    if(i == endRow-1){
    mc(tableId,startRow,endRow,col+1);
    }
    }else{
    mc(tableId,startRow,i+0,col+1);
    startRow=i+1;
    }
    }
    }
    mc1('table1');
    </script>
      

  6.   

    也不至于要说的那么刻薄吧？
    在 #2 的基础上稍作调整不就可以了吗？<table id="tab1" width="200" border="1" >
     <tr><td >张三</td><td>东营</td><td>1087</td></tr>
     <tr><td >张三</td><td>东营</td><td>1082</td></tr>
     <tr><td >张三</td><td>新疆</td><td>1082</td></tr>
     <tr><td >李文</td><td>西安</td><td>1082</td></tr>
     <tr><td >高四</td><td>北京</td><td>1087</td></tr>
     <tr><td >高四</td><td>济南</td><td>1087</td></tr>
    </table>
     
    <script>
    function mergeCell(tabId) {
      var rs=document.getElementById(tabId).rows,ac,acv;
      for(var col=rs[0].cells.length-2; col>=0; col--) {
        for(var r=0;r<rs.length;r++){
          var c=rs[r].cells[col];
          if(acv!=c.innerText){
            acv=c.innerText
            ac=c;
          }else{
            ac.rowSpan=(ac.rowSpan||0)+1;
            c.parentNode.removeChild(c);
          }
        }  
      }
    }mergeCell('tab1');
    </script>
      

  7.   

    再改下脚本,6#那个还是太麻烦
        function mc(tableId, startRow, endRow, col) {
            var tb = document.getElementById(tableId);
            if (col >= tb.rows[0].cells.length) {
                return;
            }
            if (col == 0) { endRow = tb.rows.length - 1; }
            for (var i = startRow; i < endRow; i++) {
                if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[0].innerHTML) {
                    tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]);
                    tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 1) + 1;
                    if (i == endRow - 1 && startRow != endRow) {
                        mc(tableId, startRow, endRow, col + 1);
                    }
                } else {
                    mc(tableId, startRow, i + 0, col + 1);
                    startRow = i + 1;
                }
            }
        }
        mc('table1', 0, 0, 0);
      

  8.   

    晕死,9#又有错,不给个修改功能
    <script type="text/javascript">
        function mc(tableId, startRow, endRow, col) {
            var tb = document.getElementById(tableId);
            if (col >= tb.rows[0].cells.length) {
                return;
            }
            if (col == 0) { endRow = tb.rows.length - 1; }
            for (var i = startRow; i < endRow; i++) {
                if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[0].innerHTML) {
                    tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]);
                    tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
                    if (i == endRow - 1 && startRow != endRow) {
                        mc(tableId, startRow, endRow, col + 1);
                    }
                } else {
                    mc(tableId, startRow, i + 0, col + 1);
                    startRow = i + 1;
                }
            }
        }
        mc('table1', 0, 0, 0);
    </script>
      

  9.   

    完美，还是版主 xuzuning 给力！结贴了！
      

  10.   

    仔细测试了一下，发现代码有bug，
    测试的数据为
    <table id="tab1" width="200" border="1" >
      <tr>
        <td>QTQ9-P13</td>
        <td>2013-7-22</td>
        <td>上报</td>
      </tr>
      <tr>
          
        <td>QTQ10-3</td>
        <td>2013-7-22</td>
        <td>上报</td>
      </tr>
      <tr>
        <td>QTQ10-3</td>
        <td>2013-7-22</td>
        <td>数据库</td>
      </tr>
       <tr>
        <td>QTQ10-3</td>
        <td>2013-7-22</td>
        <td>数据库</td>
      </tr>
    </table>
    结果图为
    ，并且最后一列我感觉你没处理
    for(var col=rs[0].cells.length-2; col>=0; col--) {
      

  11.   

    是的， col=rs[0].cells.length-2; 就是不处理最后一列
     col=rs[0].cells.length-1; 就处理了
    具体情况要具体分析
      

  12.   

    我说的是“并且最后一列我感觉你没处理”，你那个代码有bug,第二列全部合并了，应该是是前边一个分组的才合并
      

  13.   

    唉，求谁都不如自己动手，对自己负责！自己写代码解决了。唉 无语的CSDN