javascript_操作表格

版權聲明：本文為部落客原創文章，轉載請注明出處。 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>