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

(2)練習:每四個td為一組

加入表格8*8

 

//表格新增
	for(var i=0; i<8; i++){ $('body').append('<tr></tr>'); }
	for(var j=0; j<8; j++){ $('tr').append('<td></td>'); }

//	$('body').wrapInner('<table border="1"></table>');
	$('tr').wrapAll('<table border="1"></table>');
//表格美化	
$('table').css('margin', 'auto');
$('td').css({width: '70px', height:70, fontSize:20, textAlign:'center' });

 

//每四個td標示文字
$('td').each(function(i) {
	var tdColor = ['#F5ADAD','#9467F9','#A8F4F4','#A5FA88'];

	//(i % tdLenght)取得0,1,2,3的循環,然後加1目的是為了寫入表格時從1開始
	var tdLenght = (( i % tdColor.length ) +1);
//       console.log(tdLenght);

	$(this).text(tdLenght).css('backgroundColor', tdColor[tdLenght-1]);
});

說明:

【陣列】

利用索引值【0,1,2,…】求得個數【1,2,3..】

範例結果