DOM操作表格

前面的話

表格table元素是HTML中最復雜的結構之一。要想創建表格，一般都必須涉及表示表格行、單元格、表頭等方面的標簽。由于涉及的標簽多，因而使用核心DOM方法創建和修改表格往往都免不了要編寫大量的代碼。本文將詳細介紹DOM操作表格的屬性和方法

成都創新互聯專業為企業提供上思網站建設、上思做網站、上思網站設計、上思網站制作等企業網站建設、網頁設計與制作、上思企業網站模板建站服務，10年上思做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

需求

要通過DOM實現下列格式的表格結構

DOM操作表格

DOM操作表格

DOMcore

如果通過DOMcore方法，則方法如下

DOM操作表格

//創建表格var table = document.createElement("table");
table.border = "1";
table.width = "100%";//創建tbodyvar 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操作表格

屬性和方法

顯然DOM代碼很長，為了方便構建表格，HTML DOM為

、、元素添加了屬性和方法。

【1】為

元素添加的屬性和方法

DOM操作表格

caption:保存著對

元素的HTMLCollection tFoot:保存著對元素的指針 tHead:保存著對元素的指針 createTHead():創建元素，將其放到表格中，返回引用 createTFoot():創建元素，將其放到表格中，返回引用 createCaption():創建元素 deleteTFoot():刪除元素 deleteCaption():刪除元素添加的屬性和方法

rows:保存著

元素中行的HTMLCollection deleteRow(pos):刪除指定位置的行 insertRow(pos):向rows集合中的指定位置插入一行，返回對新插入行的引用

【3】為

元素添加的屬性和方法

cells:保存著

元素中單元格的HTMLCollection deleteCell(pos):刪除指定位置的單元格 insertCell(pos):向cells集合中的指定位置插入一個單元格，返回對新插入單元格的引用

代碼重寫

DOM操作表格

//創建表格var table = document.createElement("table");
table.border = "1";
table.width = "100%";//創建tbodyvar 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);

DOM操作表格