Javascript动态表格是一种通过JavaScript语言实现自动创建、添加和删除表格的技术。这种技术在网页设计中非常常见，特别适合需要大量信息呈现或动态展示的场合，例如网页报表、数据管理、游戏网站等等。

表格的基本结构如下：

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

第一部分：创建表格

使用 DOM 中的 createElement 方法可以创建 HTML 元素，为了创建表格，需要使用这个方法来创建三种类型的元素：table元素、thead元素和tbody元素。首先需要为 table 添加适当的样式，然后添加一个 thead 元素来指定表格的列标题，最后添加一个 tbody 元素来存放表格的数据行。

function createTable() {// 创建 table 元素var table = document.createElement("table");table.classList.add("table-class");// 创建表头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);// 创建表格数据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 方法接收一个参数，代表新行的位置，insertCell 方法没有参数，会在当前行的最后一个位置添加一个新的单元格。

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 方法。如果需要删除一整行，可以在需要删除行的父元素上调用 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动态表格的创建、添加和删除功能，这样我们就可以方便地通过JavaScript操作表格了。