Một cách suy nghĩ trong bài toán lập bảng trong javascript

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

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

Facebook