<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="file:///E|/DreameaverHtml/jquery-1.4.2.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;
}
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{
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>
合并单元格
最新推荐文章于 2021-07-16 14:21:22 发布