js如何制作table-js教程-PHP中文网

js如何制作table

幻夢星雲

发布： 2024-10-09 02:51:19

原创

840人浏览过

在 JavaScript 中，创建表格需要：1. 创建 <table> 元素；2. 使用 <thead> 和 <tr> 创建表头；3. 使用 <tbody> 和 <tr> 创建表体；4. 使用 <td> 创建单元格；5. 设置边框和间距。

js如何制作table

如何在 JavaScript 中创建表格

在 JavaScript 中，可以通过创建 <table> 元素来创建表格。

步骤：

创建表头
- 使用 <thead> 元素创建表头，包含表格的列标题。
- 在 <thead> 内使用 <tr> 元素创建行，并在其中使用 <th> 元素创建列标题。
创建表体

卡拉OK视频制作
卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情
- 使用 <tbody> 元素创建表体，包含表格的数据。
- 在 <tbody> 内使用 <tr> 元素创建行，并在其中使用 <td> 元素创建单元格。
设置边框和间距
- 使用 border 和 cellspacing 属性来设置表格的边框和单元格之间的间距。

示例代码：

<code class="javascript">// 创建一个 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 < 4; i++) {
  const trBody = document.createElement("tr");
  for (let j = 1; j < 4; j++) {
    const td = document.createElement("td");
    td.innerText = `行 ${i}，列 ${j}`;
    trBody.appendChild(td);
  }
  tbody.appendChild(trBody);
}

// 将表头和表体添加到表格中
table.appendChild(thead);
table.appendChild(tbody);

// 将表格添加到页面中
document.body.appendChild(table);</code>

登录后复制

以上代码会在页面中创建如下表格：

列标题 1	列标题 2	列标题 3
行 1，列 1	行 1，列 2	行 1，列 3
行 2，列 1	行 2，列 2	行 2，列 3
行 3，列 1	行 3，列 2	行 3，列 3

以上就是js如何制作table的详细内容，更多请关注php中文网其它相关文章！