首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

兑现表格的分组效果

2013-08-13 
实现表格的分组效果谁能帮我实现下,网上的单元格合并那些不满足这个需求,如果写好了 ,分全部奉送!!你看看m

实现表格的分组效果
兑现表格的分组效果


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

你看看mergeCell('tab1',0);
mergeCell('tab1',1);
自己看看为什么第二列没有合并??

是我的调用方式有问题?

mergeCell('tab1',0);
mergeCell('tab1',1);
mergeCell('tab1',2);
还是倒过来
mergeCell('tab1',2);
mergeCell('tab1',1);
mergeCell('tab1',0);
纯粹是不求甚解,没看我的需求!
从网上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>


[解决办法]
也不至于要说的那么刻薄吧?
在 #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>


兑现表格的分组效果
[解决办法]
晕死,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>

热点排行