javascript_操作表格

twilight0402發表於2017-03-14

版權宣告:本文為博主原創文章,轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/62047102

表格的一些常用屬性:
caption(唯一) / tBodies / tFoot / tHead / rows / cells
一些常用方法:
createTHead() / createCaption() / deleteTHead()

獲取caption

table.caption.innerHTML

獲取tBody中的列數 (tHead/tBodies)

table.tBodies[0].rows.length

獲取行數:

table.rows.length

獲取一行的列數

table.rows[1].cells.length

deleteCaption(); 刪除caption屬性

table.deleteCaption();

deleteTHead() 刪除tHead一行

table.deleteTHead(1);

deleteRow(num) 刪除行

table.deleteRow(2);

deleteCell(num); 刪除第3行第3列的單元格

table.rows[2].deleteCell(2);

建立表格

createCaption() 建立Caption
createTHead() 建立tHead
insertRow(num) 建立行
insertCell(num) 建立列
tFoot tHead 返回引用

            var table = document.createElement("table");
            table.border = 1;
            table.width = `300`;
            var caption = table.createCaption();
            caption.innerHTML = "人員資訊";     // 建立caption

            var thead = table.createTHead();    // 建立thead
            var tr1 = thead.insertRow(0);
            tr1.insertCell(0).innerHTML = "姓名";
            tr1.insertCell(1).innerHTML = "性別";
            tr1.insertCell(2).innerHTML = "年齡";

            var tbody = table.createTBody(0);
            var tbody_tr = tbody.insertRow(0);
            tbody_tr.insertCell(0).innerHTML = "張三";
            tbody_tr.insertCell(1).innerHTML = "男";
            tbody_tr.insertCell(2).innerHTML = "30";

            var tr2 = table.insertRow(2);
            tr2.insertCell(0).innerHTML = "李四";
            tr2.insertCell(1).innerHTML = "男";
            tr2.insertCell(2).innerHTML = "40";

            document.body.appendChild(table);       // 容易遺忘

建立完後再瀏覽器中檢查網頁會多出一段HTML程式碼:

    <table border=1 width=300>
        <caption>人員資訊</caption>
        <tHead>
            <tr>
                <td>姓名</td>
                <td>性別</td>
                <td>年齡</td>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>張三</td>
                <td></td>
                <td>20</td>
            </tr>
            <tr>
                <td>李四</td>
                <td></td>
                <td>30</td>
            </tr>
        </tBody>
    </table>


相關文章