「HTML」操作表格

lt;table>元素是HTML中最復雜的結構之一。要想創建表格，一般都必須涉及表示表格行、單元格、表頭等方面的標簽。由于涉及的標簽多，因而使用核心DOM方法創建和修改表格往往都免不了要編寫大量的代碼。假設我們要使用DOM來創建下面的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方法創建這些元素，得需要像下面這么多的代碼：
//創建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

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

//創建第一行
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);

//創建第二行
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代碼很長，還有點不太好懂。為了方便構建表格，HTML DOM還為<table>、<tbody>和<tr>元素添加了一些屬性和方法。
為元素添加的屬性和方法如下。

caption：保存著對<caption>元素（如果有）的指針。
tBodies：是一個<tbody>元素的HTMLCollection。
tFoot：保存著對<tfoot>元素（如果有）的指針。
tHead：保存著對<thead>元素（如果有）的指針。
rows：是一個表格中所有行的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集合中的指定位置插入一個單元格，返回對新插入單元格的引用。
使用這些屬性和方法，可以極大地減少創建表格所需的代碼數量。例如，使用這些屬性和方法可以將前面的代碼重寫如下（加陰影的部分是重寫后的代碼）。
//創建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

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

//創建第一行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"));//創建第二行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);

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

想要了解更多Java基礎知識，可以點擊評論區鏈接和小編一起學習java吧，此視頻教程為初學者而著，零基礎入門篇！給同學們帶來全新的Java300集課程啦!java零基礎小白自學Java必備優質教程_手把手圖解學習Java，讓學習成為一種享受_嗶哩嗶哩_bilibili

紹

我們都知道普通的HTML自帶的功能相對有限，很多復雜的交互式場景，如果手動去寫功能的話會非常的復雜，而且可擴展性差，就拿HTML表格來說，對于初學者或者對于復雜的拖拽式交互編程不熟悉的話會很浪費時間，因此今天就介紹一個第三方的插件——Table-draagger，來輕松實現類似的功能。Table-draagger是用于構建可重排序的拖放表的極簡主義純Javascript庫！

Github

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

特征

Table-draagger因為其以下幾個特征而讓拖拽和排序的實現變得如此簡單：

非常容易配置
能夠同時對列或行進行排序
排序時動畫流暢
沒有臃腫的依賴
提供觸摸事件（意味著在觸摸設備可以實現一些你想要的功能）

安裝使用

安裝

可以在npm上獲得它：

npm install table-dragger --save

或者引用壓縮的js文件

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

或者嘗試開發中的不穩定版本

npm install table-dragger@next --save

快速入門

請看以下代碼：

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);
});

你可以在不設置任何參數的情況下使用默認的拖拽和排序方式，當然以下是你可以配置的選項：

options.mode

1、將mode設置為column，用戶拖動和排序表的列

2、將mode設置為row，用戶拖動并排序表的行

3、設置mode為free，用戶根據點擊后鼠標移動的方向拖動行或列。注意，必須在自由模式下指定dragHandler。

options.dragHandler

dragHandler是表中的拖動句柄選擇器默認情況下，在列模式下，dragHandler是表的第一行；在行模式下，則是第一列。

options.onlyBody

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

下面是返回對象的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}`);
});

總結

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

過昨天的學習算是對HTML有了一點點了解，知道了什么是前端，什么是HTML、前端三大標準、主流瀏覽器和html的基本結構及常用標簽。那么今天繼續看看html還有什么新的知識吧。

特殊字符（了解即可）

有常見性就有特殊性，我們使用電腦時經常會用到空格鍵，在html文檔上有時也會使用到空格鍵等等，那怎么在html上又是以什么形式展示給瀏覽器解析呢？

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

表格標簽

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

表格標簽的語法

<table>

<tr>

</tr>

</table>

表格標簽：<table></table>，一個table標簽中可嵌套多個tr標簽。

行標簽：<tr></tr>，一個tr標簽代表一行。一個行標簽中可以嵌套多個單元格標簽。

單元格標簽：<td></td>，一個td標簽代表一個單元格。在單元格中可以填充文本、圖片、超鏈接等等內容。

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

表格示例：

在html文檔中編輯表格標簽結構時，除了一個標簽一個標簽地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table標簽中輸入：“tr*5>td*3”然后敲回車，就將其表格結構迅速展現出來。

<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>

運行界面示例：默認狀態下表格是沒有線條分界，表格對齊方式左對齊。

表頭單元格標簽

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

語法：

<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>

運行界面示例：

表格結構標簽

表格結構標簽分為表格頭部標簽和表格主體標簽。類似于head標簽和body標簽對于html標簽之間的關系。

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

表格主體標簽：<tbody></tbody>。定義表格主體，嵌套在<table></table>中，主要用于顯示數據。

代碼示例：

<h1>表格結構標簽</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>

運行界面：

表格屬性

雖然表格屬性在實際開發過程中不常使用，一般都是通過CSS樣式設置，但是還是需要記住這些屬性關鍵詞，在css中屬性關鍵詞也會用到。

注：這些屬性都要寫在table標簽的開始標簽中，多個屬性之間需要使用空格分隔。

align：表格的對其方式。

align=“left”：在瀏覽器中居左顯示。也是默認顯示。

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

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

border：表格是否具有邊框。

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

cellpadding：單元格內的元素和td邊框的距離。

舉個例子，如果表格是一件教室的話，桌子就是單元格，桌子上放的書本就是單元格內的元素，書本邊緣和桌子邊緣之間產生的空白區域就是cellpadding的值。

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

還是以教室為表格，桌子為單元格。桌子和桌子之間的距離就是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>

運行界面：

合并單元格

合并單元格是指將兩個或兩個以上的單元格合并成一個單元格。合并屬性一般寫在單元格標簽的開始標簽上。合并代碼屬性設置后，要將沒有寫合并的單元格代碼的其他合并單元格標簽刪除掉。

目標單元格：（合并代碼存在位置）

跨行合并：最上側單元格為目標單元格，寫合并代碼。

跨列合并：最左側單元格為目標單元格，寫合并代碼。

合并單元格的方式：

跨行合并：將處于不同行的單元格進行合并

語法：rowspan=“合并單元格個數”

代碼示例：

<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>

運行界面：

跨列合并：將處于不同列的單元格進行合并

語法：colspan=“合并單元格個數”

代碼示例：

<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>

運行示例：

今天學習的表格內容就到這里了，明天開始學習列表。

在線咨詢

上一篇：在線文字圖片識別工具
下一篇：深度學習自動前端開發：從草圖到HTML只需5秒

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「HTML」操作表格

紹

Github

特征

安裝使用

總結

特殊字符（了解即可）

表格標簽

您的項目需求