JavaScriptда HTML таблицалар яратиш

Бизда бущ буш HTML таблица бор деб фараз килайлик:

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

Келинг, бу таблицани қатор ва устунлар билан тўлдирамиз. Бизнинг натижада шундай нарса бўлиши керак:

<table id="table">
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

Масалани ечиш учун бизга икки та ёпилған цикл керак бўлади. Биринчи цикл таблицанинг қаторларини яратади, иккинчиси эсар ҳар бир қатордаги ҳужайраларни:

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');
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Бош HTML таблица берилган. Икки та ёпилған for цикл ёрдамида бу таблицани 5 та қатор ва 5 та устун билан тўлдиринг.

Олдинги масалани ўзгартиринг, шундай ки таблица 10 қатордан 5 устунгача бўлган ўлчамда яратилсин.

Олдинги масалани ўзгартиринг, шундай ки ҳар бир td га 'x' матни қўшилсин.

Таблица генераторини амалга оширинг, таблицанинг эни ва бўйи иккита инпут орқали берилади (масалан, 5 га 10 ҳужайрали таблица).