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

(四)加入事件2:點選儲存格位置【十】字儲存格變色

$("td").click(function() {
	var $Ctd = $(this);

	//S2:將全部表格顏色變為白色(新增)
	$Ctd.parents('table').find('td').css('backgroundColor', '#FFFFFF');
	
	//S1 點選所在位置,設定色彩
	$Ctd.css('backgroundColor', 'black');
});

S1:點選td 該【列】變色

$("td").click(function() {
	var Ctd = $(this);

	//S2:將全部表格顏色變為白色(新增)
		$Ctd.parents('table').find('td').css('backgroundColor', '#FFFFFF');

	//S3【列變色】:將點選Ctd的上一層Ctr>下一層的td,變成紅色(新增)
		var $Ctr = $Ctd.parent();							//點選$Ctd的上一層$Ctr
		$Ctr.children().css('backgroundColor', 'red');
	
	//S1 點選所在位置,設定色彩
		$Ctd.css('backgroundColor', 'black');
});

S1:範例結果

S2:點選td該【欄】變色

$("td").click(function() {
	var $Ctd = $(this);

	//S2:將全部表格顏色變為白色(新增)
		$Ctd.parents('table').find('td').css('backgroundColor', '#FFFFFF');

	//S3【列變色】:將點選Ctd的上一層Ctr>下一層的td,變成紅色
			var $Ctr = $Ctd.parent();				//點選$Ctd的上一層$Ctr
			$Ctr.children().css('backgroundColor', 'red');

	//S4【欄變色】:方法1:利用each()判斷每個儲存格(新增)
		//計算點選的Ctr的td,所在的第幾個
			var $nthChild = $Ctr.children().index($Ctd);		
		//利用each() 比對每一列
			$('tr').each(function() {				
				$(this).children().eq($nthChild).css('backgroundColor', 'blue');
			});

	//S1 點選所在位置,設定色彩
		$Ctd.css('backgroundColor', 'black');
});
</script>

S2:範例結果(方法1)

$("td").click(function() {
	var $Ctd = $(this);

	//S2:將全部表格顏色變為白色(新增)
		$Ctd.parents('table').find('td').css('backgroundColor', '#FFFFFF');

	//S3【列變色】:將點選Ctd的上一層Ctr>下一層的td,變成紅色
			var $Ctr = $Ctd.parent();				//點選$Ctd的上一層$Ctr
			$Ctr.children().css('backgroundColor', 'red');

	//S4【欄變色】:方法2:利用選取器及DOM關係(新增)
		//以index()找出是第幾欄, 稍後要用於nth-child,另以1起算,故先加1
				var $nthChild = $Ctr.children().index($Ctd) + 1;
		
		//將表格所有其他<tr>塗綠
			$Ctr.siblings().find("td:nth-child(" + $nthChild + ")")
			.css("background-color", "green");

	//S1 點選所在位置,設定色彩
		$Ctd.css('backgroundColor', 'black');
});

S2:範例結果(方法2)