[jQuery]選擇器--內容篩選【contains/has/empty】

2009-12-07

23526
0
jQuery

jQuery可以針對物件內容物，搜尋包含特定字串、物件、以及空的(無內容)的物件

基本語法：

tr裡面有包含到BB這個字串的
- $('tr:contains("BB")')
tr 裡面不包含th的
- $('tr :not(:has(th)))
Contains:字串 v.s. has:控制項
空的td內容加上N/A的字樣
- $('td:empty).html('N/A')

範例：

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('tr:contains("BB")').addClass('myEven');
				});
				$('#btn2').click(function(){
					$('tr:not(:has(th))').addClass('myEven');
				});
				$('#btn3').click(function(){
					$('td:empty').html('N/A');
				});
			})
		</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="選取Contains('BB')的Tr"><br />
		<input type="Button" id="btn2" name="btn2" value="選取非has(th)"><br />
		<input type="Button" id="btn3" name="btn3" value="無內容Empty"><br />
		<hr />
		<table border="1">
			<tr>
				<th>AA</th>
				<th>2,1</th>
				<th>3,1</th>
				<th>4,1</th>
				<th>5,1</th>
				<td></td>
			</tr>
			<tr>
				<td>BB</td>
				<td>2,2</td>
				<td>3,2</td>
				<td>4,2</td>
				<td>5,2</td>
				<td></td>
			</tr>
			<tr>
				<td>CC</td>
				<td>2,3</td>
				<td>3,3</td>
				<td>4,3</td>
				<td>5,3</td>
				<td></td>
			</tr>
			<tr>
				<td>DD</td>
				<td>2,4</td>
				<td>3,4</td>
				<td>4,4</td>
				<td>5,4</td>
				<td></td>
			</tr>
		</table>
	</BODY>
</HTML>

以下是簽名：