HTML ҷадвалҳоро пайдарпай пур кардан

Бигзор мо ҷадвали HTML-и холие чунин дошта бошем:

<table id="table"></table>

Биёед ин ҷадвалро бо ҳуҷайраҳо пур кунем ва онро чунон созем, ки дар ин ҳуҷайраҳо рақамҳо аз 1 то 9 гузаранд. Ин мисолест аз он чӣ бояд ба даст ояд:

<table id="table">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

Биёед ба татбиқ шурӯъ кунем.

Аввалан, биёед танҳо ҷадвале бо андозаи 3 ба 3 созем, ки бо ҳарфҳои 'x' пур шуда бошад:

let table = document.querySelector('#table');

for (let i = 0; i < 3; i++) {
	let tr = document.createElement('tr');
	
	for (let i = 0; i < 3; i++) {
		let td = document.createElement('td');
		td.textContent = 'x';
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Ҳоло биёед онро чунон созем, ки ба ҷои ҳарфҳои 'x' дар ҳуҷайраҳо рақамҳо ба тартиби афзоиш навишта шаванд.

Барои ин мо бояд як ҳисобгари дигар дохил кунем, ки арзишҳои худро дар ҳар такрори ҳалқаи дарунӣ пайдарпай зиёд кунад, чунон:

let table = document.querySelector('#table');

let k = 1; // арзиши ибтидоии ҳисобгар
for (let i = 0; i < 3; i++) {
	let tr = document.createElement('tr');
	
	for (let i = 0; i < 3; i++) {
		let td = document.createElement('td');
		
		td.textContent = k; // ҳисобгарро ба ҳуҷайра нависед
		k++; // ҳисобгарро зиёд мекунем
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

HTML ҷадвалеро бо андозаи 5 сатр ба 5 сутун чоп кунед, ки дар ҳуҷайраҳои он рақамҳо аз 1 то 25 пайдарпай истода бошанд.

Масъалаи гузаштаро чунон ислоҳ кунед, ки дар ҳуҷайраҳои ҷадвал рақамҳои ҷуфт дар фосилаи аз 2 то 50 навишта шаванд.