今天剛好有個需求，有個複雜的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);
}
});
}
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |
