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

(三)加入事件1:點選儲存格變色

$('table').css('margin', 'auto');
$('td').css({width: '70px', height:70, fontSize:20, textAlign:'center' });
$("td").click(function() {
	var $Ctd = $(this);
	//S1 點選所在位置,設定色彩
	$Ctd.css('backgroundColor', 'black');
});

S1:範例結果

jQuery DOM關係

參考網址本網參考網址

(1) 承前例,再新增一個表格

//承前例,再新增一個表格

     for(var i=0; i<8; i++){ $('body').append('<tr></tr>'); }
     for(var j=0; j<8; j++){ $('tr').append('<td></td>'); }
     $('tr').wrapAll('<table border="1"></table>');

     $('table').clone().insertAfter('table');                /*新增*/

(2) 討論DOM結構

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

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

S2:範例結果