Javascript動態(tài)表格是一種通過JavaScript語言實現(xiàn)自動創(chuàng)建、添加和刪除表格的技術。這種技術在網(wǎng)頁設計中非常常見，特別適合需要大量信息呈現(xiàn)或動態(tài)展示的場合，例如網(wǎng)頁報表、數(shù)據(jù)管理、游戲網(wǎng)站等等。

表格的基本結(jié)構(gòu)如下：

<table>
<thead>
<tr>
<th>列標題1</th>
<th>列標題2</th>
<th>列標題3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
</tbody>
</table>

第一部分：創(chuàng)建表格

使用 DOM 中的 createElement 方法可以創(chuàng)建 HTML 元素，為了創(chuàng)建表格，需要使用這個方法來創(chuàng)建三種類型的元素：table元素、thead元素和tbody元素。首先需要為 table 添加適當?shù)臉邮剑缓筇砑右粋€ thead 元素來指定表格的列標題，最后添加一個 tbody 元素來存放表格的數(shù)據(jù)行。

function createTable() {
// 創(chuàng)建 table 元素
var table = document.createElement("table");
table.classList.add("table-class");
// 創(chuàng)建表頭
var thead = document.createElement("thead");
var row = document.createElement("tr");
var cell1 = document.createElement("th");
var cell2 = document.createElement("th");
var cell3 = document.createElement("th");
cell1.innerText = "列標題1";
cell2.innerText = "列標題2";
cell3.innerText = "列標題3";
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
thead.appendChild(row);
table.appendChild(thead);
// 創(chuàng)建表格數(shù)據(jù)
var tbody = document.createElement("tbody");
for (var i = 0; i< 5; i++) {
var tr = document.createElement("tr");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
var cell3 = document.createElement("td");
cell1.innerText = "行" + (i+1) + "列1";
cell2.innerText = "行" + (i+1) + "列2";
cell3.innerText = "行" + (i+1) + "列3";
tr.appendChild(cell1);
tr.appendChild(cell2);
tr.appendChild(cell3);
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);
}
createTable();

第二部分：添加行和列

如果需要向表格中添加新的行或者列，可以使用 DOM 中的方法 insertRow 和 insertCell 方法。這些方法可以在表格中插入新的行和單元格。其中 insertRow 方法接收一個參數(shù)，代表新行的位置，insertCell 方法沒有參數(shù)，會在當前行的最后一個位置添加一個新的單元格。

function addRow() {
var table = document.querySelector("table");
var tbody = table.querySelector("tbody");
var newRow = tbody.insertRow(-1);
var cell1 = newRow.insertCell(-1);
var cell2 = newRow.insertCell(-1);
var cell3 = newRow.insertCell(-1);
cell1.innerText = "新行列1";
cell2.innerText = "新行列2";
cell3.innerText = "新行列3";
}
function addColumn() {
var table = document.querySelector("table");
var tbody = table.querySelector("tbody");
var rows = tbody.querySelectorAll("tr");
for (var i = 0; i< rows.length; i++) {
var cell = rows[i].insertCell(-1);
cell.innerText = "新列" + (i+1);
} 
}
addRow();
addColumn();

第三部分：刪除行和列

刪除行或列可以使用 DOM 中的 remove 方法。如果需要刪除一整行，可以在需要刪除行的父元素上調(diào)用 deleteRow 方法并傳入需要刪除的行的位置。如果需要刪除整列，需要遍歷所有行并刪除相應單元格。

function deleteRow(index) {
var table = document.querySelector("table");
var tbody = table.querySelector("tbody");
tbody.deleteRow(index);
}
function deleteColumn(index) {
var table = document.querySelector("table");
var tbody = table.querySelector("tbody");
var rows = tbody.querySelectorAll("tr");
for (var i = 0; i< rows.length; i++) {
rows[i].deleteCell(index);
}
}
deleteRow(3);
deleteColumn(1);

以上三部分介紹了JavaScript動態(tài)表格的創(chuàng)建、添加和刪除功能，這樣我們就可以方便地通過JavaScript操作表格了。