从零实现待办事项（Todo List）：HTML+CSS+JavaScript 实战

待办事项列表（Todo List）是前端入门的经典案例，它涵盖了 DOM 操作、事件处理、样式控制等核心知识点。本文将基于提供的代码，详细讲解如何从零构建一个可添加、标记完成、修改和删除的待办事项功能，并解析实现思路。

一、整体结构设计

一个完整的待办事项列表需要三个核心部分：输入区域（添加待办）、展示区域（显示待办）、交互逻辑（添加 / 修改 / 删除等操作）。我们先看整体代码结构：

1. HTML：搭建页面骨架

<div class="container">
  <!-- 输入区域：文本框 + 添加按钮 -->
  <div class="content">
    <input type="text" class="text">
    <input type="button" class="btn" value="add">
  </div>
  
  <!-- 展示区域：表格显示待办事项 -->
  <table border="1">
    <thead>
      <tr>
        <td>内容</td>
        <td width="150px">操作</td>
      </tr>
    </thead>
    <tbody>
      <!-- 待办事项将通过 JavaScript 动态添加到这里 -->
    </tbody>
  </table>
</div>

HTML 结构非常简洁：

• 用 container 作为整体容器，保证页面居中
• content 是输入区域，包含文本框（输入待办内容）和按钮（触发添加）
• 表格用于展示待办，thead 固定表头（“内容” 和 “操作”），tbody 动态填充待办事项

2. CSS：美化页面样式

CSS 主要负责布局和视觉效果，让页面更易用：

* {
  padding: 0;
  margin: 0; /* 清除默认内外边距 */
}

.container {
  width: 400px;
  margin: 200px auto; /* 容器水平居中，距离顶部200px */
}

.content {
  display: flex;
  margin-bottom: 15px; /* 输入区域与表格间隔15px */
}

.text {
  width: 80%; /* 文本框占80%宽度 */
  outline: none; /* 去掉输入时的默认外边框 */
  padding: 5px;
}

.btn {
  width: 20%; /* 按钮占20%宽度 */
}

table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并（无双重边框