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

(四)加入事件3:點選位置【右側】及【下方列】皆變色彩

$('table').css('margin', 'auto');
$('td').css({width: '70px', height:70, fontSize:20, textAlign:'center' });
$("td").click(function() {
		var $Ctd = $(this);
	//S1:將全部表格顏色變為白色
		$Ctd.parents('table').find('td').css('backgroundColor', '#FFFFFF');
	
	//S2:點選【列之下變色】:
		var $Ctr = $Ctd.parent();							
		$Ctr.nextAll().children().css('backgroundColor', 'blue');
	
	//S3:點選【欄之右變色】:

		//方法1 each方法,之右儲存格填色
		$Ctd.parents('table').find('tr').each(function(){
		     $(this).children().eq($nthChild).nextAll().css('background-color','#26a69a');
		});

		//方法2 $Ctr siblings ,之右儲存格填色
		var $nthChild = $Ctr.children().index($Ctd) +1 ; 				//+1不包含點選Ctd
		$Ctr.siblings().addBack().find("td:nth-child(" + $nthChild + ")")
			.nextAll()
			.css("background-color", "blue");
});

範例結果