練習3:<br>Table練習,選取器介紹

練習三:Table練習,選取器介紹

(一)Html結構

加入表格8*8

(二)JQ美化

(1)練習:西洋棋盤美化

$('table').css('margin', 'auto');
$('td').css({
	width: '70px',	height:70
});
//$('td:even') 是所有偶數元素的集合
	$('td:even').css('backgroundColor', '#FBE3E3');	
//交錯式td美化	
	$('tr:even td:nth-child(even),tr:odd td:nth-child(odd)').css('background', '#9D8BC3');
	$('tr:even td:nth-child(odd),tr:odd td:nth-child(even)').css('background', '#A9FFBB');
//td內有非空白者
	$('td:not(:empty)') .css('backgroundColor', '#F8FF85');
//td內有<a href:”#”>連結</a>者色彩美化
	$('[href]').parent().css('backgroundColor', '#BBF2FC');
//td內容有【bbb】文字字樣者
	$('td:contains(bbb)') .css('backgroundColor', '#FFDCA3');

範例結果

【選擇器Selector】參考(中)(英)