<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