[jQuery]選擇器--基本篩選二【even / odd /eq】
基本語法說明:
- 某物件集合中,所有偶數個的項目
- 例如:所有tr中,偶數個
- $('tr:even')
- 某物件集合中,所有奇數個的項目
- 例如:所有tr中,奇數個
- $('tr:odd')
- 依照index取物件,符合條件的第幾個。index從0開始
- 例如:tr集合中的第二個
- $('tr:eq(1)')
範例:
<HTML>
<HEAD>
<Script Type="text/javascript" src="js/jQuery.js"></Script>
<Script Type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$('tr:even').removeClass();
$('tr:even').addClass('myEven');
});
$('#btn2').click(function(){
$('tr:odd').removeClass();
$('tr:odd').addClass('myOdd');
});
$('#btn3').click(function(){
$('tr:eq(1)').removeClass();
$('tr:eq(1)').addClass('myEq');
});
$('#btn4').click(function(){
$('#tbd tr:even').removeClass();
$('#tbd tr:even').addClass('myEven');
});
})
</Script>
<style type="text/css">
.myOdd
{
background-Color:pink;
}
.myEven
{
background-Color:Yellow;
}
.myEq
{
background-Color:green;
}
</style>
</HEAD>
<BODY>
<input type="Button" id="btn1" name="btn1" value="測試Even">
<br />
<input type="Button" id="btn2" name="btn2" value="測試Odd">
<br />
<input type="Button" id="btn3" name="btn3" value="測試eq">
<br />
<input type="Button" id="btn4" name="btn4" value="測試tbody內的tr">
<br />
<hr />
<table border="1">
<thead>
<tr>
<th>1,0</th>
<th>2,0</th>
<th>3,0</th>
<th>4,0</th>
<th>5,0</th>
</tr>
</thead>
<tbody id="tbd">
<tr>
<td>1,1</td>
<td>2,1</td>
<td>3,1</td>
<td>4,1</td>
<td>5,1</td>
</tr>
<tr>
<td>1,2</td>
<td>2,2</td>
<td>3,2</td>
<td>4,2</td>
<td>5,2</td>
</tr>
<tr>
<td>1,3</td>
<td>2,3</td>
<td>3,3</td>
<td>4,3</td>
<td>5,3</td>
</tr>
<tr>
<td>1,4</td>
<td>2,4</td>
<td>3,4</td>
<td>4,4</td>
<td>5,4</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
以下是簽名:
- 歡迎轉貼本站的文章,不過請在貼文主旨上加上【轉貼】,並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】,感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫,如果您需要C#的Code,也許您可以試著用線上的工具進行轉換,這裡提供幾個參考
Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |