阿发

最新推荐文章于 2021-11-19 15:55:14 发布

broadLove

最新推荐文章于 2021-11-19 15:55:14 发布

阅读量841

点赞数

分类专栏：前台技术文章标签： jquery function null button border go

前台技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Fancy Navigation with CSS & 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 οnclick='go()'> 合并单元格</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>

broadLove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阿发

Fancy Navigation with CSS & jQuery - Tutorial by Soh Tanaka /** * willcheck:要进行处理的表格对象(或者行的集合即可) * colnum:要进行合并单元格的列 */function coltogather(willcheck,colnum){ var alltex
复制链接

扫一扫

专栏目录