合并单元格
<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 onclick='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>
