「HTML」操作表格

lt;table>元素是HTML中最復(fù)雜的結(jié)構(gòu)之一。要想創(chuàng)建表格，一般都必須涉及表示表格行、單元格、表頭等方面的標(biāo)簽。由于涉及的標(biāo)簽多，因而使用核心DOM方法創(chuàng)建和修改表格往往都免不了要編寫(xiě)大量的代碼。假設(shè)我們要使用DOM來(lái)創(chuàng)建下面的HTML表格。
<table border="1" width="100%">
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>

要使用核心DOM方法創(chuàng)建這些元素，得需要像下面這么多的代碼：
//創(chuàng)建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//創(chuàng)建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//創(chuàng)建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell1_1 = document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);

//創(chuàng)建第二行
var row2 = document.createElement("tr");
tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2= document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);

//將表格添加到文檔主體中
document.body.appendChild(table);

顯然，DOM代碼很長(zhǎng)，還有點(diǎn)不太好懂。為了方便構(gòu)建表格，HTML DOM還為<table>、<tbody>和<tr>元素添加了一些屬性和方法。
為元素添加的屬性和方法如下。

caption：保存著對(duì)<caption>元素（如果有）的指針。
tBodies：是一個(gè)<tbody>元素的HTMLCollection。
tFoot：保存著對(duì)<tfoot>元素（如果有）的指針。
tHead：保存著對(duì)<thead>元素（如果有）的指針。
rows：是一個(gè)表格中所有行的HTMLCollection。

createTHead()：創(chuàng)建<thead>元素，將其放到表格中，返回引用。
createTFoot()：創(chuàng)建<tfoot>元素，將其放到表格中，返回引用。
createCaption()：創(chuàng)建<caption>元素，將其放到表格中，返回引用。
deleteTHead()：刪除<thead>元素。
deleteTFoot()：刪除<tfoot>元素。
deleteCaption()：刪除<caption>元素。
deleteRow(_pos_)：刪除指定位置的行。
insertRow(_pos_)：向rows集合中的指定位置插入一行。
為<tbody>元素添加的屬性和方法如下。
rows：保存著<tbody>元素中行的HTMLCollection。
deleteRow(pos)：刪除指定位置的行。

insertRow(pos)：向rows集合中的指定位置插入一行，返回對(duì)新插入行的引用。
為<tr>元素添加的屬性和方法如下。
cells：保存著<tr>元素中單元格的HTMLCollection。
deleteCell(pos)：刪除指定位置的單元格。
insertCell(pos)：向cells集合中的指定位置插入一個(gè)單元格，返回對(duì)新插入單元格的引用。
使用這些屬性和方法，可以極大地減少創(chuàng)建表格所需的代碼數(shù)量。例如，使用這些屬性和方法可以將前面的代碼重寫(xiě)如下（加陰影的部分是重寫(xiě)后的代碼）。
//創(chuàng)建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//創(chuàng)建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//創(chuàng)建第一行tbody.insertRow(0);tbody.rows[0].insertCell(0);tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));tbody.rows[0].insertCell(1);tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));//創(chuàng)建第二行tbody.insertRow(1);tbody.rows[1].insertCell(0);tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));tbody.rows[1].insertCell(1);tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//將表格添加到文檔主體中
document.body.appendChild(table);

在這次的代碼中，創(chuàng)建<table>和<tbody>的代碼沒(méi)有變化。不同的是創(chuàng)建兩行的部分，其中使用了HTML DOM定義的表格屬性和方法。在創(chuàng)建第一行時(shí)，通過(guò)<tbody>元素調(diào)用了insertRow()方法，傳入了參數(shù)0——表示應(yīng)該將插入的行放在什么位置上。執(zhí)行這一行代碼后，就會(huì)自動(dòng)創(chuàng)建一行并將其插入到<tbody>元素的位置0上，因此就可以馬上通過(guò)tbody.rows[0]來(lái)引用新插入的行。
創(chuàng)建單元格的方式也十分相似，即通過(guò)<tr>元素調(diào)用insertCell()方法并傳入放置單元格的位置。然后，就可以通過(guò)tbody.rows[0].cells[0]來(lái)引用新插入的單元格，因?yàn)樾聞?chuàng)建的單元格被插入到了這一行的位置0上。
總之，使用這些屬性和方法創(chuàng)建表格的邏輯性更強(qiáng)，也更容易看懂，盡管技術(shù)上這兩套代碼都是正確的。

想要了解更多Java基礎(chǔ)知識(shí)，可以點(diǎn)擊評(píng)論區(qū)鏈接和小編一起學(xué)習(xí)java吧，此視頻教程為初學(xué)者而著，零基礎(chǔ)入門篇！給同學(xué)們帶來(lái)全新的Java300集課程啦!java零基礎(chǔ)小白自學(xué)Java必備優(yōu)質(zhì)教程_手把手圖解學(xué)習(xí)Java，讓學(xué)習(xí)成為一種享受_嗶哩嗶哩_bilibili

紹

我們都知道普通的HTML自帶的功能相對(duì)有限，很多復(fù)雜的交互式場(chǎng)景，如果手動(dòng)去寫(xiě)功能的話會(huì)非常的復(fù)雜，而且可擴(kuò)展性差，就拿HTML表格來(lái)說(shuō)，對(duì)于初學(xué)者或者對(duì)于復(fù)雜的拖拽式交互編程不熟悉的話會(huì)很浪費(fèi)時(shí)間，因此今天就介紹一個(gè)第三方的插件——Table-draagger，來(lái)輕松實(shí)現(xiàn)類似的功能。Table-draagger是用于構(gòu)建可重排序的拖放表的極簡(jiǎn)主義純Javascript庫(kù)！

Github

https://github.com/sindu12jun/table-dragger

特征

Table-draagger因?yàn)槠湟韵聨讉€(gè)特征而讓拖拽和排序的實(shí)現(xiàn)變得如此簡(jiǎn)單：

非常容易配置
能夠同時(shí)對(duì)列或行進(jìn)行排序
排序時(shí)動(dòng)畫(huà)流暢
沒(méi)有臃腫的依賴
提供觸摸事件（意味著在觸摸設(shè)備可以實(shí)現(xiàn)一些你想要的功能）

安裝使用

安裝

可以在npm上獲得它：

npm install table-dragger --save

或者引用壓縮的js文件

<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>

或者嘗試開(kāi)發(fā)中的不穩(wěn)定版本

npm install table-dragger@next --save

快速入門

請(qǐng)看以下代碼：

import tableDragger from 'table-dragger'
tableDragger(el, options?)

<table id="table">
<thead>
<tr>
<th class='handle'>header1</th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
</tbody>
</table>

var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});

你可以在不設(shè)置任何參數(shù)的情況下使用默認(rèn)的拖拽和排序方式，當(dāng)然以下是你可以配置的選項(xiàng)：

options.mode

1、將mode設(shè)置為column，用戶拖動(dòng)和排序表的列

2、將mode設(shè)置為row，用戶拖動(dòng)并排序表的行

3、設(shè)置mode為free，用戶根據(jù)點(diǎn)擊后鼠標(biāo)移動(dòng)的方向拖動(dòng)行或列。注意，必須在自由模式下指定dragHandler。

options.dragHandler

dragHandler是表中的拖動(dòng)句柄選擇器默認(rèn)情況下，在列模式下，dragHandler是表的第一行；在行模式下，則是第一列。

options.onlyBody

在行模式下將onlyBody設(shè)置為true時(shí)，用戶只能在tbody中提升行。

下面是返回對(duì)象的API

tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
.on('drag', () => {
console.log('drag');
})
.on('drop', (from, to, el, mode) => {
console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('shadowMove', (from, to, el, mode) => {
console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('out', (el, mode) => {
console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
});

總結(jié)

Table-draagger為我們節(jié)省了很多手動(dòng)封裝表格排序和拖拽功能的時(shí)間，當(dāng)然目前很多第三方框架已經(jīng)實(shí)現(xiàn)了類似的功能，這更適用于原生的html表格，你還可以通過(guò)一些手段記憶用戶拖拽，這只是其中一種思路，Enjoy it！~

過(guò)昨天的學(xué)習(xí)算是對(duì)HTML有了一點(diǎn)點(diǎn)了解，知道了什么是前端，什么是HTML、前端三大標(biāo)準(zhǔn)、主流瀏覽器和html的基本結(jié)構(gòu)及常用標(biāo)簽。那么今天繼續(xù)看看html還有什么新的知識(shí)吧。

特殊字符（了解即可）

有常見(jiàn)性就有特殊性，我們使用電腦時(shí)經(jīng)常會(huì)用到空格鍵，在html文檔上有時(shí)也會(huì)使用到空格鍵等等，那怎么在html上又是以什么形式展示給瀏覽器解析呢？

瀏覽器顯示結(jié)果	特殊字符名稱	HTML編輯字符
	空格	& n b s p;
<	小于號(hào)	& l t ；
>	大于號(hào)	& g t；
&	和	& a m p；
?	版權(quán)	& c o p y ；

表格標(biāo)簽

作用：在瀏覽器上清晰美觀地顯示、展示數(shù)據(jù)。

表格標(biāo)簽的語(yǔ)法

<table>

<tr>

</tr>

</table>

表格標(biāo)簽：<table></table>，一個(gè)table標(biāo)簽中可嵌套多個(gè)tr標(biāo)簽。

行標(biāo)簽：<tr></tr>，一個(gè)tr標(biāo)簽代表一行。一個(gè)行標(biāo)簽中可以嵌套多個(gè)單元格標(biāo)簽。

單元格標(biāo)簽：<td></td>，一個(gè)td標(biāo)簽代表一個(gè)單元格。在單元格中可以填充文本、圖片、超鏈接等等內(nèi)容。

在html中表格不是由橫線劃分行和列，而是大大小小的矩形盒子來(lái)劃分。Table是一個(gè)最大的矩形盒子，里面包含tr標(biāo)簽，這個(gè)是一個(gè)和table長(zhǎng)度差不多的矩形盒子，table一行僅容納一個(gè)tr盒子。在tr盒子中還包含有N個(gè)td盒子，td盒子就是單元格。

表格示例：

在html文檔中編輯表格標(biāo)簽結(jié)構(gòu)時(shí)，除了一個(gè)標(biāo)簽一個(gè)標(biāo)簽地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table標(biāo)簽中輸入：“tr*5>td*3”然后敲回車，就將其表格結(jié)構(gòu)迅速展現(xiàn)出來(lái)。

<h1>表格示例：</h1>
<table>
        <tr>
            <td>姓名</td>
            <td>性別</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
</table>

運(yùn)行界面示例：默認(rèn)狀態(tài)下表格是沒(méi)有線條分界，表格對(duì)齊方式左對(duì)齊。

表頭單元格標(biāo)簽

<th></th>：位于表格的第一行或第一列，可以使其內(nèi)容加粗居中顯示。

語(yǔ)法：

<table>

<th>

</th>

</table>

表頭表格代碼示例：

<h1>表頭表格示例：</h1>
   <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運(yùn)行界面示例：

表格結(jié)構(gòu)標(biāo)簽

表格結(jié)構(gòu)標(biāo)簽分為表格頭部標(biāo)簽和表格主體標(biāo)簽。類似于head標(biāo)簽和body標(biāo)簽對(duì)于html標(biāo)簽之間的關(guān)系。

表格頭部標(biāo)簽：<thead></thead>。定義表格頭部，嵌套在<table></table>中，一般位于第一行。

表格主體標(biāo)簽：<tbody></tbody>。定義表格主體，嵌套在<table></table>中，主要用于顯示數(shù)據(jù)。

代碼示例：

<h1>表格結(jié)構(gòu)標(biāo)簽</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三豐</td>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr>
                <td>李四喜</td>
                <td>女</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

運(yùn)行界面：

表格屬性

雖然表格屬性在實(shí)際開(kāi)發(fā)過(guò)程中不常使用，一般都是通過(guò)CSS樣式設(shè)置，但是還是需要記住這些屬性關(guān)鍵詞，在css中屬性關(guān)鍵詞也會(huì)用到。

注：這些屬性都要寫(xiě)在table標(biāo)簽的開(kāi)始標(biāo)簽中，多個(gè)屬性之間需要使用空格分隔。

align：表格的對(duì)其方式。

align=“l(fā)eft”：在瀏覽器中居左顯示。也是默認(rèn)顯示。

align=“center”：在瀏覽器中居中顯示。

align=“right”：在瀏覽器中居右顯示。

border：表格是否具有邊框。

border=”1”：表格添加邊框。

cellpadding：?jiǎn)卧駜?nèi)的元素和td邊框的距離。

舉個(gè)例子，如果表格是一件教室的話，桌子就是單元格，桌子上放的書(shū)本就是單元格內(nèi)的元素，書(shū)本邊緣和桌子邊緣之間產(chǎn)生的空白區(qū)域就是cellpadding的值。

cellspacing：單元格和單元格之間的距離。默認(rèn)是有空隙的，可設(shè)置為零，使其空隙清零，成為一條直線。

還是以教室為表格，桌子為單元格。桌子和桌子之間的距離就是cellspacing的值。

width：表格的寬度，屬性值可以是像素值也可以是百分比。

height：表格的高度，屬性值可以是像素值也可以是百分比。

代碼示例：

<h1>表頭表格示例：</h1>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>                   
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運(yùn)行界面：

合并單元格

合并單元格是指將兩個(gè)或兩個(gè)以上的單元格合并成一個(gè)單元格。合并屬性一般寫(xiě)在單元格標(biāo)簽的開(kāi)始標(biāo)簽上。合并代碼屬性設(shè)置后，要將沒(méi)有寫(xiě)合并的單元格代碼的其他合并單元格標(biāo)簽刪除掉。

目標(biāo)單元格：（合并代碼存在位置）

跨行合并：最上側(cè)單元格為目標(biāo)單元格，寫(xiě)合并代碼。

跨列合并：最左側(cè)單元格為目標(biāo)單元格，寫(xiě)合并代碼。

合并單元格的方式：

跨行合并：將處于不同行的單元格進(jìn)行合并

語(yǔ)法：rowspan=“合并單元格個(gè)數(shù)”

代碼示例：

<h1>跨行合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運(yùn)行界面：

跨列合并：將處于不同列的單元格進(jìn)行合并

語(yǔ)法：colspan=“合并單元格個(gè)數(shù)”

代碼示例：

<h1>跨列合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運(yùn)行示例：

今天學(xué)習(xí)的表格內(nèi)容就到這里了，明天開(kāi)始學(xué)習(xí)列表。

在線咨詢

上一篇：一文讀懂HTML和CSS的關(guān)系
下一篇：Html+CSS - 1段CSS讓表格更漂亮建議收藏

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

「HTML」操作表格

紹

Github

特征

安裝使用

總結(jié)

特殊字符（了解即可）

表格標(biāo)簽

您的項(xiàng)目需求