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:
html<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ó:
html<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:
javascriptlet 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);
}
Задание 1
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.
Задание 2
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.
Задание 3
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'.
Задание 4
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 ô).