Tạo bảng HTML bằng JavaScript

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 vào bảng này các hàng và cột. Đây là ví dụ về kết quả chúng ta nên có:

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

Để giải quyết bài toán, chúng ta cần hai vòng lặp lồng nhau. Vòng lặp đầu tiên sẽ tạo các hàng của bảng, còn vòng lặp thứ hai - tạo các ô trong mỗi hàng:

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);
}

Cho một bảng HTML trống. Sử dụng hai vòng lặp for lồng nhau, hãy điền vào bảng này 5 hàng với 5 cột.

Hãy sửa đổi bài toán trước đó sao cho bảng được tạo với kích thước 10 hàng trên 5 cột.

Hãy sửa đổi bài toán trước đó sao cho vào mỗi td được thêm văn bản 'x'.

Hãy triển khai một trình tạo bảng, chiều rộng và chiều cao của bảng được xác định trong hai ô nhập liệu (ví dụ: bảng 5 trên 10 ô).