html+js table动态添加列

可以通过以下步骤在 HTML 和 JavaScript 中动态添加表格列：

1. 在 HTML 中创建一个表格，可以使用 `<table>` 标签，然后在其中添加表头和表格行。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

2. 在 JavaScript 中获取表格元素并添加一个新的表头单元格和新的行单元格。可以使用 `insertCell()` 方法向行中添加单元格，并使用 `appendChild()` 方法将单元格添加到表头或行中。还可以使用 `createElement()` 方法创建新的元素节点，并使用 `appendChild()` 方法将其添加到表头中。

// 获取表格元素
var table = document.querySelector('table');

// 添加新的表头单元格
var th = document.createElement('th');
th.textContent = 'Email';
table.querySelector('thead tr').appendChild(th);

// 获取表格行元素
var trs = table.querySelectorAll('tbody tr');

// 遍历每一行，添加新的单元格
for (var i = 0; i < trs.length; i++) {
  var td = document.createElement('td');
  td.textContent = 'example@example.com';
  trs[i].appendChild(td);
}

3. 最后，可以使用 CSS 样式表样式表格和新添加的单元格。

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

以上代码将在现有表格中动态添加一个名为“Email”的新列，并将其填充为“example@example.com”。请注意，这只是一个简单的示例，您可以根据您的需求进行修改。