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>