[jQuery]寫個RowSpan的fn

今天剛好有個需求,有個複雜的Table要來做RowSpan的動作,程式是ASP。如果寫在Table產生時來處理,一來會讓程式看得比較混雜,二來也不好處理。因此乾脆來試著寫個fn來做這件事情。

緣起

今天剛好有個需求,有個複雜的Table要來做RowSpan的動作,程式是ASP。如果寫在Table產生時來處理,一來會讓程式看得比較混雜,二來也不好處理。因此乾脆來試著寫個jQuery的fn來做這件事情。

程式

程式上並不複雜,呼叫者必須是該Column的所有物件集合,然後透過each逐一檢查,看看內容是否與上一個相同,而有不同的時候,記錄為要做RowSpan的物件,其他的物件就hide()起來。以下是RowSpan的fn

jQuery.fn.rowspan = function(){
	var i=0;
	var pText='';
	var sObj;	//預計進行RowSpan物件
	var rcnt=0;	//計算rowspan的數字
	var tlen=this.length;
	return this.each(function(){
		i=i+1;
		rcnt=rcnt+1;
		//與前項不同
		if(pText!=$(this).text())
		{
			if(i!=1)
			{
				//不是剛開始,進行rowspan
				sObj.attr('rowspan',rcnt-1);
				rcnt=1;
			}
			//設定要rowspan的物件
			sObj=$(this);
			pText=$(this).text();
		}
		else
		{
			$(this).hide();
		}
			
		if(i==tlen)
		{
			sObj.attr('rowspan',rcnt+1);
		}
	});
}

存為js方便未來調用

將這一段程式碼存為TableRowSpan.js,方便未來要用的時候直接引用。

使用他

以下就做個範例來說明如何使用他。有兩個按鈕,分別針對第一個Column與第二個Column來處理RowSpan,透過自定的屬性,方便抓出第1個Column與第2個Column。以下是完整的測試成程式碼,各位需要測試時,請將他存為htm檔案即可

<HEAD>
<TITLE></TITLE>
<script type="Text/JavaScript" src="js/jQuery.js"></script>
<script type="Text/JavaScript" src="js/TableRowSpan.js"></script>
<Script type="Text/JavaScript" Language="JavaScript">
$(document).ready(function(){
	$('#btn1').click(function(){
		$('td[dt="c1"]').rowspan();
	});
	$('#btn2').click(function(){
		$('td[dt="c2"]').rowspan();
	});
})
</Script>
</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
	<INPUT type="button" value="進行c1的RowSpan" id=btn1 name=btn1><br>
	<INPUT type="button" value="進行c2的RowSpan" id=btn2 name=btn2><br>
	<hr>
	<table border="1">
		<thead>
			<tr>
				<th>h1</th>
				<th>h2</th>
				<th>h3</th>
				<th>h4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td dt="c1">x1</td>
				<td dt="c2">x21</td>
				<td>3,1</td>
				<td>4,1</td>
			</tr>
			<tr>
				<td dt="c1">x1</td>
				<td dt="c2">x21</td>
				<td>3,2</td>
				<td>4,2</td>
			</tr>
			<tr>
				<td dt="c1">x1</td>
				<td dt="c2">x22</td>
				<td>3,3</td>
				<td>4,3</td>
			</tr>
			<tr>
				<td dt="c1">x1</td>
				<td dt="c2">x22</td>
				<td>3,4</td>
				<td>4,4</td>
			</tr>
			<tr>
				<td dt="c1">x1</td>
				<td dt="c2">x22</td>
				<td>3,5</td>
				<td>4,5</td>
			</tr>
			<tr>
				<td dt="c1">xx1</td>
				<td dt="c2">x23</td>
				<td>3,6</td>
				<td>4,6</td>
			</tr>
			<tr>
				<td dt="c1">xx1</td>
				<td dt="c2">x24</td>
				<td>3,7</td>
				<td>4,7</td>
			</tr>
			<tr>
				<td dt="c1">xx1</td>
				<td dt="c2">x25</td>
				<td>3,8</td>
				<td>4,8</td>
			</tr>
			<tr>
				<td dt="c1">xx1</td>
				<td dt="c2">x25</td>
				<td>3,9</td>
				<td>4,9</td>
			</tr>
			<tr>
				<td dt="c1">xx1</td>
				<td dt="c2">x25</td>
				<td>3,10</td>
				<td>4,10</td>
			</tr>
		</tbody>
	</table>
</FORM>
</BODY>
</HTML>

2009/12/11補充:

再加上可以設定顏色切換的版本

jQuery.fn.rowspan = function(){
	color1=color1 || '';
	color2=color2 || '';
	var col=[color1,color2];
	var i=0;
	var pText='';
	var sObj;	//預計進行RowSpan物件
	var rcnt=0;	//計算rowspan的數字
	var tlen=this.length;
	var spancnt=0;	//計算有幾個做了span
	return this.each(function(){
		i=i+1;
		rcnt=rcnt+1;
		//與前項不同
		if(pText!=$(this).text())
		{
			if(i!=1)
			{
				//不是剛開始,進行rowspan
				sObj.attr('rowspan',rcnt-1);
				rcnt=1;
			}
			//設定要rowspan的物件
			sObj=$(this);
			pText=$(this).text();
			sObj.css('background-color',col[spancnt%2]);
			spancnt++;
		}
		else
		{
			$(this).hide();
		}
			
		if(i==tlen)
		{
			sObj.attr('rowspan',rcnt+1);
		}
	});
}


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat