<html >


<head>


<meta http-equiv="Content-Type" content="text/html; charset=gbk" />


<title>Fancy Navigation with CSS &amp; jQuery - Tutorial by Soh Tanaka</title>


 


<script type="text/javascript" src="jquery.js"></script>


<script type="text/javascript">



/**


  * willcheck:要进行处理的表格对象(或者行的集合即可)


  * colnum:要进行合并单元格的列


  */


function coltogather(willcheck,colnum){


    var alltext = [],togotherNum = [],oldnum = [],id=1,lasttext=null,rmflag=1;


    //逐列的数据进行扫描,得到里面的不重复的数据,以及各个数据的数目,然后将依据此结果进行设置rowspan属性


    willcheck.each(function(){


          var _rmnum = this.getAttribute('rmnum');


          if(!_rmnum)_rmnum=0;


          var trdom= jQuery('td:eq('+(colnum-_rmnum)+')',this)


          var text = jQuery(trdom).text();  


          //如果上一行记录文本为空,说明是第一行


          if(lasttext==null) {


               lasttext = text;


          }else {


              //如果当前行和上一行记录一样,说明要进行合并,合并的单元格数目就加1


              if(lasttext!=text){  


                   togotherNum.push(id);


                   lasttext = text;


                   id = 1;


              } else{


                  id++;


              }


          }


          


     });   


     togotherNum.push(id);


     //复制allnum数组中的数据到oldnum数组


     jQuery.each(togotherNum, function(i, n){


         oldnum[i] =n;


     });


     var index = 0,len = togotherNum.length;


     //逐行进行处理,设置指定列的rowspan属性,以及将要合并的单元格remove!


     willcheck.each(function() {


                // 得到一个属性表示该行已经被移除了几个td


                var _rmnum = this.getAttribute('rmnum');


                if (!_rmnum)


                    _rmnum = 0;


                var tddom = jQuery('td:eq(' + (colnum - _rmnum) + ')', this)


                if (togotherNum[index] == oldnum[index]) {


                    tddom.attr('rowSpan', togotherNum[index]);


                    if(togotherNum[index]>1)


                      togotherNum[index] = togotherNum[index] - 1;


                     else


                       index++;


                } else {


                    if (togotherNum[index] == 0) {


                        index++;


                        tddom.attr('rowSpan', togotherNum[index]);


                    } else {


                        tddom.remove();


                        if(--togotherNum[index]==0){


                            index++;


                        }


                    }


                    // 移除了td之后,要在tr里面添加一个属性标示已经移除的td的数目


                    if (_rmnum == 0) {


                        jQuery(this).attr('rmnum', 1);


                    } else {


                        jQuery(this).attr('rmnum', 1 + _rmnum * 1);


                    }


                }


            });   


     //清空数组


     alltext = null;


     togotherNum = null;


     oldnum = null;


}




function isinarr(arr,str){


  for(var i=arr.length-1;i>=0;i-- ){


    if(arr[i]==str)


    {return i;


    }


  }


  return -1;


}


/*检查初始表格是否完整（每行td个数一样）*/


function checktable(id){


  var tdnum=0;


  $('#'+id+' tr').each(function(){


    if(tdnum==0){


       tdnum = $('td',this).size();


    }else{


       if(tdnum!=$('td',this).size()){


            tdnum = -1;


            return false;


       }


    }


  });


  if(tdnum>0)


     return true;


  return false;


}



 function go() {  


     if(!checktable('aaa')){


        return false;


    }else{


        //对1、2、3列进行合并单元格


       coltogather($('#aaa tr'),0);   


       coltogather($('#aaa tr'),1);   


       coltogather($('#aaa tr'),2);   


    }


}



$(document).ready(function(){go();});


</script>


</head>



<body>


<button 合并单元格</button>


<TABLE  id='aaa' border='1 red'>


<TR>


    <TD>111</TD>


    <TD>22</TD>


    <TD>33</TD>


    <TD>11</TD>


    <TD>22</TD>


    <TD>33</TD>


</TR>


<TR>


    <TD>111</TD>


    <TD>22</TD>


    <TD>33</TD>


    <TD>11</TD>


    <TD>22</TD>


    <TD>33</TD>


</TR>


<TR>


    <TD>22</TD>


    <TD>22</TD>


    <TD>33</TD>


    <TD>11</TD>


    <TD>22</TD>


    <TD>33</TD>


</TR>


<TR>


    <TD>55</TD>


    <TD>22</TD>


    <TD>66</TD>


    <TD>11</TD>


    <TD>22</TD>


    <TD>33</TD>


</TR>


<TR>


    <TD>55</TD>


    <TD>22</TD>


    <TD>66</TD>


    <TD>11</TD>


    <TD>22</TD>


    <TD>33</TD>


</TR>


</TABLE>


</body>


</html>