html5 中js 表格的 config方法使用示例

HTML5中并没有内置的表格配置方法或属性，但您可以使用JavaScript来动态配置和操作HTML表格。以下是一个示例，演示了如何使用JavaScript来配置HTML表格：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>

JavaScript代码：

// 获取表格元素
var table = document.getElementById("myTable");

// 创建一个配置对象
var config = {
  columns: ["姓名", "年龄", "职业"],
  data: [
    ["张三", 25, "工程师"],
    ["李四", 30, "设计师"]
  ]
};

// 使用配置对象更新表格
function updateTable(config) {
  // 清空表格内容
  table.innerHTML = "";

  // 添加表头
  var thead = document.createElement("thead");
  var headerRow = document.createElement("tr");
  config.columns.forEach(function(column) {
    var th = document.createElement("th");
    th.textContent = column;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 添加数据行
  var tbody = document.createElement("tbody");
  config.data.forEach(function(rowData) {
    var row = document.createElement("tr");
    rowData.forEach(function(cellData) {
      var cell = document.createElement("td");
      cell.textContent = cellData;
      row.appendChild(cell);
    });
    tbody.appendChild(row);
  });
  table.appendChild(tbody);
}

// 使用配置对象更新表格
updateTable(config);

在上述示例中，我们首先通过`document.getElementById`方法获取到表格元素。然后，我们创建了一个配置对象`config`，其中定义了列和数据的信息。接下来，我们定义了一个`updateTable`函数，它根据配置对象来更新表格的内容。在`updateTable`函数中，我们首先清空表格的内容，然后根据配置对象添加表头和数据行。

最后，我们调用`updateTable`函数，并传入配置对象`config`，从而更新表格的内容。

请注意，这只是一个简单的示例，用于演示如何使用JavaScript来配置HTML表格。实际使用中，您可能需要根据具体需求进行更复杂的配置和操作。