插件窝 干货文章 js如何制作table

js如何制作table

创建 strong 使用 createElement 767    来源:    2024-10-19
在 javascript 中,创建表格需要:1. 创建 元素;2. 使用 和 创建表头;3. 使用 和 创建表体;4. 使用 创建单元格;5. 设置边框和间距。

如何在 JavaScript 中创建表格

在 JavaScript 中,可以通过创建

元素来创建表格。

步骤:

  1. 创建表头

    • 使用
元素创建表头,包含表格的列标题。
  • 内使用 元素创建行,并在其中使用 元素创建表体,包含表格的数据。
  • 内使用 元素创建行,并在其中使用
    元素创建列标题。
  • 创建表体

    • 使用
  • 元素创建单元格。
  • 设置边框和间距

    • 使用 border 和 cellspacing 属性来设置表格的边框和单元格之间的间距。
  • 示例代码:

    // 创建一个 3 行 3 列的表格
    const table = document.createElement("table");
    table.setAttribute("border", "1");
    table.setAttribute("cellspacing", "0");
    
    // 创建表头
    const thead = document.createElement("thead");
    const trHead = document.createElement("tr");
    const th1 = document.createElement("th");
    th1.innerText = "列标题 1";
    const th2 = document.createElement("th");
    th2.innerText = "列标题 2";
    const th3 = document.createElement("th");
    th3.innerText = "列标题 3";
    trHead.appendChild(th1);
    trHead.appendChild(th2);
    trHead.appendChild(th3);
    thead.appendChild(trHead);
    
    // 创建表体
    const tbody = document.createElement("tbody");
    for (let i = 1; i <p>以上代码会在页面中创建如下表格:</p>
    列标题 1 列标题 2 列标题 3
    行 1,列 1 行 1,列 2 行 1,列 3
    行 2,列 1 行 2,列 2 行 2,列 3
    行 3,列 1 行 3,列 2 行 3,列 3