Điền tuần tự các bảng HTML

Giả sử chúng ta có một bảng HTML trống như thế này:

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

Hãy điền bảng này với các ô và làm sao để trong các ô đó là các số từ 1 đến 9. Đây là ví dụ về kết quả chúng ta phải đạt được:

<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>

Hãy bắt đầu triển khai.

Đầu tiên, hãy tạo một bảng kích thước 3 trên 3, điền đầy bằng các chữ cái '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);
}

Bây giờ hãy làm sao để thay vì các chữ cái 'x', các số theo thứ tự tăng dần được ghi vào các ô.

Để làm điều này, chúng ta cần thêm một bộ đếm khác, bộ đếm này sẽ tăng tuần tự giá trị của nó trong mỗi lần lặp của vòng lặp bên trong, như thế này:

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

let k = 1; // giá trị ban đầu của bộ đếm
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; // ghi bộ đếm vào ô
		k++; // tăng bộ đếm
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Hiển thị ra màn hình một bảng HTML kích thước 5 hàng trên 5 cột sao cho trong các ô của nó lần lượt là các số từ 1 đến 25.

Sửa đổi bài toán trước đó sao cho trong các ô của bảng được ghi các số chẵn trong khoảng từ 2 đến 50.