正文

JavaScript编写原生表格，从零开始教程

/0 浏览量
0810

在这个数字化时代，表格是一个无处不在的数据展示工具。JavaScript，作为一种功能强大的前端脚本语言，可以帮助我们轻松创建和管理各种风格的表格。本文将从零开始，逐步指导你使用原生 JavaScript 编写一个基本的表格。

第一部分：准备环境

在开始之前，确保你的计算机上安装了以下工具：

  1. 浏览器：任何主流的浏览器（如Chrome、Firefox等）都可以。
  2. 代码编辑器：推荐使用Visual Studio Code、Sublime Text或者任何你喜欢的代码编辑器。

第二部分：HTML 结构

首先，我们需要创建表格的 HTML 结构。以下是表格的基本结构：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格行将通过 JavaScript 动态插入 -->
  </tbody>
</table>

在上面的代码中，我们创建了一个包含标题和标题行的表格，以及一个用于放置数据行的 <tbody> 标签。

第三部分：CSS 样式

接下来，我们给表格添加一些基本样式。以下是简单的 CSS 样式：

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

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

th {
  background-color: #f2f2f2;
}

将这些样式添加到你的 HTML 文件中，或者单独的 CSS 文件，并通过 <link> 标签引入。

第四部分：JavaScript 动态生成数据

现在，我们将使用 JavaScript 动态生成表格数据。以下是一个示例代码：

document.addEventListener('DOMContentLoaded', function() {
  const tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
  
  const data = [
    { name: '张三', age: 25, city: '北京' },
    { name: '李四', age: 30, city: '上海' },
    { name: '王五', age: 22, city: '广州' }
  ];
  
  data.forEach(function(item) {
    let row = document.createElement('tr');
    
    let cell1 = document.createElement('td');
    cell1.textContent = item.name;
    row.appendChild(cell1);
    
    let cell2 = document.createElement('td');
    cell2.textContent = item.age;
    row.appendChild(cell2);
    
    let cell3 = document.createElement('td');
    cell3.textContent = item.city;
    row.appendChild(cell3);
    
    tableBody.appendChild(row);
  });
});

在这段代码中，我们首先监听 DOMContentLoaded 事件，以确保在 HTML 文档完全加载后再执行 JavaScript 代码。然后，我们获取表格的 <tbody> 元素，创建一个新的数据数组，遍历该数组并生成相应的表格行和数据单元格，最后将这些行添加到 <tbody> 中。

第五部分：保存并预览

完成上述步骤后，保存你的 HTML、CSS 和 JavaScript 文件，并在浏览器中打开 HTML 文件。你应该能看到一个包含数据的表格。

总结

通过本教程，你已经学会了如何使用原生 JavaScript 创建一个简单的表格。接下来，你可以尝试添加更多的功能和样式，让你的表格更加丰富多彩。记住，实践是学习的关键，多加练习，你将会更加熟练地使用 JavaScript 来创建各种表格。

-- 展开阅读全文 --