Để 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 .