Để lập bảng ví dụ bảng có 3 dòng 3 cột trong html ta có thể dùng cách dưới. Tuy nhiên trong javascript ta có thể tối ưu bằng 1 vài dòng lệnh cũng có thể tạo 1 bảng.
Trong html thuần ta có thể dùng như sau:
<table align="center" border="1px solid black" cellspacing="5" cellpadding="15"
<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>
Bây giờ ta muốn chuyển dạng html thuần trên sang dùng bằng javascript, ta để ý trong thẻ <tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
có những thẻ td lặp lại, do đó ta có thể dùng vòng lặp để xuất ra các thẻ <td> </td>
và bên ngoài thẻ td, các thẻ tr cũng lặp lại 3 lần, do đó ta cũng có thể dùng vòng lặp for , và vòng lặp này sẽ ở bên ngoài vòng lặp for của td
Các thành phần như <table> chỉ xuất hiện 1 lần nên ta sẽ đặt ngoài vòng lặp . Ta có thể viết theo javascript như sau:
<script>
let sout;// khai báo biến
sout = '<table align="center" border="1px solid black" cellspacing="5" cellpadding="15">';
for (let i = 1; i < 4; i++) { // dòng này sẽ chạy 3 lần để đưa ra 3 dòng tr
sout += '<tr>';
for (let j = 1; j < 4; j++) {// dòng này sẽ chạy 3 lần để đưa ra 3 cột td
sout += '<td></td>';
}
sout += '</tr>';
}
sout += '</table>';
document.write(sout);// xuất ra màn hình bảng
</script>
Để mở rộng ta có thể tăng giá trị trong vòng for, tuỳ trì các thẻ td riêng biệt bằng các lệnh if .