第一百一十五節，JavaScript，DOM操做表格

時間  2019-11-12
標籤 第一百 一十五 javascript dom 表格 欄目 JavaScript 简体版
原文   原文鏈接

JavaScript，DOM操做表格html

 

學習要點：node

1.操做表格瀏覽器

DOM在操做生成HTML上，仍是比較簡明的。不過，因爲瀏覽器老是存在兼容和陷阱，致使最終的操做就不是那麼簡單方便了。本章主要了解一下DOM操做表格和樣式的一些知識。app

一．操做表格函數

<table>標籤是HTML中結構最爲複雜的一個，咱們能夠經過DOM來建立生成它，或者HTML DOM來操做它。(PS：HTML DOM提供了更加方便快捷的方式來操做HTML，有手冊)。學習

使用DOM來建立個表格，很繁瑣【不推薦】spa

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //使用DOM來建立這個表格
    var table = document.createElement('table'); //建立table元素節點
    table.border = 1;    //設置table元素節點邊框寬度
    table.width = 300;   //設置table元素節點寬度

    var caption = document.createElement('caption');  //建立表格標題caption元素節點
    table.appendChild(caption);  //將標題caption元素節點，添加到table元素節點的子節點末尾
    caption.appendChild(document.createTextNode('人員表')); //建立一個文本將它添加到標題caption元素節點裏

    var thead = document.createElement('thead');
    table.appendChild(thead);

    var tr = document.createElement('tr');
    thead.appendChild(tr);

    var th1 = document.createElement('th');
    var th2 = document.createElement('th');
    var th3 = document.createElement('th');

    tr.appendChild(th1);
    th1.appendChild(document.createTextNode('姓名'));
    tr.appendChild(th2);
    th2.appendChild(document.createTextNode('年齡'));

    document.body.appendChild(table);

};

PS：使用DOM來建立表格其實已經沒有什麼難度，就是有點兒小煩而已。下面咱們再使用HTML DOM來獲取和建立這個相同的表格。code

 

HTML DOM建立或者獲取表格更清晰方便，比DOM好的多htm

 

HTML DOM中，給這些元素標籤提供了一些屬性和方法blog

屬性或方法

說明

caption

保存着<caption>元素的引用

tBodies

保存着<tbody>元素的HTMLCollection集合

tFoot

保存着對<tfoot>元素的引用

tHead

保存着對<thead>元素的引用

rows

保存着對<tr> 元素的HTMLCollection集合

createTHead()

建立<thead>元素，並返回引用

createTFoot()

建立<tfoot>元素，並返回引用

createCaption()

建立<caption>元素，並返回引用

deleteTHead()

刪除<thead>元素

deleteTFoot()

刪除<tfoot>元素

deleteCaption()

刪除<caption>元素

deleteRow(pos)

刪除指定的行

insertRow(pos)

向rows集合中的指定位置插入一行

 

<tbody>元素添加的屬性和方法

屬性或方法

說明

rows

保存着<tbody>元素中行的HTMLCollection

deleteRow(pos)

刪除指定位置的行

insertRow(pos)

向rows集合中的指定位置插入一行，並返回引用

 

<tr>元素添加的屬性和方法

屬性或方法

說明

cells

保存着<tr>元素中單元格的HTMLCollection

deleteCell(pos)

刪除指定位置的單元格

insertCell(pos)

向cells集合的指定位置插入一個單元格，並返回引用

PS：由於表格較爲繁雜，層次也多，在使用以前所學習的DOM只是來獲取某個元素會很是難受，因此使用HTML DOM會清晰不少

HTML DOM獲取表格

首先要經過id或者名稱，獲取到table節點

caption屬性，獲取或設置表格的<caption>標題標籤
使用方式：
table節點.caption

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    alert(table.caption);   //caption屬性，獲取表格的caption標題標籤節點
    //返回：[object HTMLTableCaptionElement]
    alert(table.caption.innerHTML); //查看標題節點裏的文本內容
    //返回：人員表
    table.caption.innerHTML = '標題修改了';
    alert(table.caption.innerHTML); //查看標題節點裏的文本內容
    //返回：標題修改了

};

tHead屬性，獲取表格的<thead>表頭標籤節點
使用方式：
table節點.tHead

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    alert(table.tHead);  //tHead屬性，獲取表格的<thead>表頭標籤節點
    //返回：[object HTMLTableSectionElement]
};

tFoot屬性，獲取表格的<tfoot>表尾標籤節點
使用方式：
table節點.tFoot

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    alert(table.tFoot);  //tFoot屬性，獲取表格的<tfoot>表尾標籤節點
    //返回：[object HTMLTableSectionElement]
};

tBodies屬性，獲取表格的<tbody>表主體標籤節點，由於主體能夠有多個，因此tBodies屬性返回的集合
使用方式：
table節點.tBodies

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    alert(table.tBodies);  //tBodies屬性，獲取表格的<tbody>表主體標籤節點，由於主體能夠有多個，因此tBodies屬性返回的集合
    //返回：[object HTMLCollection]
    alert(table.tBodies[0]); //獲取第一個<tbody>標籤
    //返回：[object HTMLTableSectionElement]
};

PS：在一個表格中<thead>和<tfoot>是惟一的，只能有一個。而<tbody>不是惟一的能夠有多個，這樣致使最後返回的<thead>和<tfoot>是元素引用，而<tbody>返回的是元素集合。

rows屬性，獲取表格的行籤節點，由於行能夠有多個，因此rows屬性返回的集合
使用方式：
table節點.rows

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    alert(table.rows);  //rows屬性，獲取表格的<tr>主體裏的行籤節點，由於行能夠有多個，因此rows屬性返回的集合
    //返回：[object HTMLCollection]
    alert(table.rows.length); //獲取<tr>標籤長度
    //返回：4
};

獲取表格主體<tbody>的<tr>裏的行籤節點

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    alert(table.tBodies[0].rows);  //獲取表格主體第一個<tbody>的<tr>裏的行籤節點
    //返回：[object HTMLCollection]
    alert(table.tBodies[0].rows.length); //獲取<tr>標籤長度
    //返回：2
};

cells屬性，獲取表格的<tr>裏的<td>單元格節點，cells屬性返回的集合
使用方式：
rows[0]行節點.cells

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    alert(table.tBodies[0].rows[0]);  //獲取第一個表格主體裏的第一個<tr>標籤
    //返回：[object HTMLCollection]
    //cells屬性，獲取表格的<tr>裏的<td>單元格節點，cells屬性返回的集合
    alert(table.tBodies[0].rows[0].cells);  //獲取第一個表格主體<tbody>裏的第一個<tr>標籤裏的單元格<td>
    //返回;[object HTMLCollection]
    alert(table.tBodies[0].rows[0].cells.length); //查看單元格<td>的長度
    //返回;3
};

獲取<td>單元格里的文本內容

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    alert(table.tBodies[0].rows[0]);  //獲取第一個表格主體裏的第一個<tr>標籤
    //返回：[object HTMLCollection]
    //cells屬性，獲取表格的<tr>裏的<td>單元格節點，cells屬性返回的集合
    alert(table.tBodies[0].rows[0].cells);  //獲取第一個表格主體<tbody>裏的第一個<tr>標籤裏的單元格<td>
    //返回;[object HTMLCollection]
    alert(table.tBodies[0].rows[0].cells[0].innerHTML); //查看第一個單元格<td>的文本內容
    //返回;張三
};

 

按HTML DOM來刪除標題、表頭、表尾、行、單元格

 

deleteCaption()方法，刪除表格的標題<caption>節點
使用方式：
table節點.deleteCaption()

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    table.deleteCaption();  //deleteCaption()方法，刪除表格的標題<caption>節點
};

deleteTHead()方法，刪除表格的表頭<thead>節點
使用方式：
table節點.deleteTHead()

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    table.deleteTHead();  //deleteTHead()方法，刪除表格的表頭<thead>節點
};

deleteTFoot()方法，刪除表格的表尾<tfoot>節點
使用方式：
table節點.deleteTFoot()

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    table.deleteTFoot();  //deleteTFoot()方法，刪除表格的表尾<tfoot>節點
};

deleteRow()方法，刪除表格的行<tr>節點，參數是要刪除第幾個tr標籤
使用方式：
tr父節點.deleteRow(要刪除第幾個tr)

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    table.tBodies[0].deleteRow(0);  //deleteRow()方法，刪除表格的行<tr>節點
};

deleteCell()方法，刪除表格的單元格<td>節點，參數是要刪除第幾個td標籤
使用方式：
td父節點.deleteCell(要刪除第幾個td標籤)

/*
<table border="1" width="300">
    <caption>人員表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：N</td>
        </tr>
    </tfoot>
</table>
*/
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.getElementsByTagName('table')[0]; //經過名稱獲取到table標籤節點
    table.tBodies[0].rows[1].deleteCell(1);  //deleteCell()方法，刪除表格的單元格<td>節點，參數是要刪除第幾個td標籤
};

 添加表格

 給<body>添加<table>標籤

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.createElement('table');  //建立一個元素table標籤節點
    table.width = 300; //設置table標籤寬度
    table.border = 1;  //table標籤邊框寬度
    document.body.appendChild(table); //將table標籤添加到body的子節點裏
};

createCaption()方法，給表格<table>，添加標題標籤<caption>
使用方式：
<caption>父節點.createCaption()

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.createElement('table');  //建立一個元素table標籤節點
    table.width = 300; //設置table標籤寬度
    table.border = 1;  //table標籤邊框寬度

    table.createCaption().innerHTML = '人員表';  //createCaption()方法，給表格<table>，添加標題標籤<caption>
    document.body.appendChild(table); //將table標籤添加到body的子節點裏
};

createTHead()方法，給表格<table>，添加表頭標籤<thead>，返回引用
使用方式：
<thead>父節點.createTHead()

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.createElement('table');  //建立一個元素table標籤節點
    table.width = 300; //設置table標籤寬度
    table.border = 1;  //table標籤邊框寬度
    document.body.appendChild(table); //將table標籤添加到body的子節點裏

    table.createCaption().innerHTML = '人員表';  //createCaption()方法，給表格<table>，添加標題標籤<caption>
    var thead = table.createTHead();  //createTHead()方法，給表格<table>，添加表頭標籤<thead>
};

insertRow()方法，給表格添加行標籤<tr>，參數添加第幾行，返回引用
使用方式：
<tr>父節點.insertRow()

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.createElement('table');  //建立一個元素table標籤節點
    table.width = 300; //設置table標籤寬度
    table.border = 1;  //table標籤邊框寬度
    document.body.appendChild(table); //將table標籤添加到body的子節點裏

    table.createCaption().innerHTML = '人員表';  //createCaption()方法，給表格<table>，添加標題標籤<caption>
    var thead = table.createTHead();  //createTHead()方法，給表格<table>，添加表頭標籤<thead>
    thead.insertRow(0);  //insertRow()方法，給表格添加行標籤<tr>
};

insertCell()方法，給表格添加單元格標籤<td>,參數建立第幾個td
使用方式：
<td>父節點.insertCell()

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var table = document.createElement('table');  //建立一個元素table標籤節點
    table.width = 300; //設置table標籤寬度
    table.border = 1;  //table標籤邊框寬度
    document.body.appendChild(table); //將table標籤添加到body的子節點裏

    table.createCaption().innerHTML = '人員表';  //createCaption()方法，給表格<table>，添加標題標籤<caption>
    var thead = table.createTHead();  //createTHead()方法，給表格<table>，添加表頭標籤<thead>
    var tr = thead.insertRow(0);  //insertRow()方法，給表格添加行標籤<tr>
    tr.insertCell(0).innerHTML = '數據1';  //insertCell()方法，給表格添加單元格標籤<td>,參數建立第幾個td
    tr.insertCell(1).innerHTML = '數據2';
    tr.insertCell(2).innerHTML = '數據3';
};

在建立表格的時候<table>、<tbody>、<th>沒有特定的方法，須要使用document來建立。也能夠模擬已有的方法編寫特定的函數便可，例如：insertTH()之類的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程