JavaScript如何实现新增，编辑，删除操作

发布时间：2022-04-27 16:15:03 作者：iii
来源：亿速云阅读：261

# JavaScript如何实现新增，编辑，删除操作

在现代Web开发中，CRUD（创建Create、读取Read、更新Update、删除Delete）操作是最基础也最核心的功能。本文将详细介绍如何使用JavaScript实现新增、编辑和删除功能，涵盖DOM操作、事件处理以及数据持久化等关键技术点。

## 一、准备工作

### 1.1 基础HTML结构
我们先创建一个简单的任务列表界面作为演示：

```html
<!DOCTYPE html>
<html>
<head>
  <title>CRUD操作示例</title>
  <style>
    .task-item { margin: 10px; padding: 10px; border: 1px solid #ddd; }
    .completed { text-decoration: line-through; color: #999; }
  </style>
</head>
<body>
  <h1>任务管理系统</h1>
  
  <div id="task-form">
    <input type="text" id="task-input" placeholder="输入新任务">
    <button id="add-btn">添加</button>
  </div>
  
  <div id="task-list"></div>
  
  <script src="app.js"></script>
</body>
</html>

1.2 初始数据

在JavaScript文件中初始化示例数据：

let tasks = [
  { id: 1, title: '学习JavaScript', completed: false },
  { id: 2, title: '编写项目文档', completed: true },
  { id: 3, title: '会议讨论', completed: false }
];

二、新增操作实现

2.1 添加事件监听

为添加按钮绑定点击事件：

document.getElementById('add-btn').addEventListener('click', addTask);

// 同时支持回车键添加
document.getElementById('task-input').addEventListener('keypress', function(e) {
  if (e.key === 'Enter') addTask();
});

2.2 实现添加逻辑

function addTask() {
  const input = document.getElementById('task-input');
  const title = input.value.trim();
  
  if (!title) {
    alert('任务内容不能为空');
    return;
  }
  
  // 创建新任务对象
  const newTask = {
    id: Date.now(), // 使用时间戳作为ID
    title: title,
    completed: false
  };
  
  // 添加到数组
  tasks.push(newTask);
  
  // 清空输入框
  input.value = '';
  
  // 重新渲染列表
  renderTaskList();
  
  // 可选：保存到本地存储
  saveToLocalStorage();
}

三、编辑操作实现

3.1 添加编辑UI

修改渲染函数，为每个任务添加编辑按钮和功能：

function renderTaskList() {
  const taskList = document.getElementById('task-list');
  taskList.innerHTML = '';
  
  tasks.forEach(task => {
    const taskElement = document.createElement('div');
    taskElement.className = `task-item ${task.completed ? 'completed' : ''}`;
    taskElement.dataset.id = task.id;
    
    taskElement.innerHTML = `
      <input type="checkbox" ${task.completed ? 'checked' : ''}>
      <span class="task-title">${task.title}</span>
      <button class="edit-btn">编辑</button>
      <button class="delete-btn">删除</button>
    `;
    
    taskList.appendChild(taskElement);
  });
}

3.2 实现编辑功能

document.getElementById('task-list').addEventListener('click', function(e) {
  if (e.target.classList.contains('edit-btn')) {
    const taskElement = e.target.closest('.task-item');
    const taskId = parseInt(taskElement.dataset.id);
    editTask(taskId);
  }
});

function editTask(taskId) {
  const task = tasks.find(t => t.id === taskId);
  if (!task) return;
  
  const taskElement = document.querySelector(`.task-item[data-id="${taskId}"]`);
  const titleElement = taskElement.querySelector('.task-title');
  
  const currentTitle = titleElement.textContent;
  const input = document.createElement('input');
  input.type = 'text';
  input.value = currentTitle;
  
  titleElement.replaceWith(input);
  input.focus();
  
  function saveEdit() {
    const newTitle = input.value.trim();
    if (newTitle && newTitle !== currentTitle) {
      task.title = newTitle;
      saveToLocalStorage();
    }
    renderTaskList();
  }
  
  input.addEventListener('blur', saveEdit);
  input.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') saveEdit();
  });
}

四、删除操作实现

4.1 添加删除事件

document.getElementById('task-list').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-btn')) {
    const taskElement = e.target.closest('.task-item');
    const taskId = parseInt(taskElement.dataset.id);
    deleteTask(taskId);
  }
});

4.2 实现删除逻辑

function deleteTask(taskId) {
  if (confirm('确定要删除这个任务吗？')) {
    tasks = tasks.filter(task => task.id !== taskId);
    renderTaskList();
    saveToLocalStorage();
  }
}

五、状态切换功能

作为补充，我们实现任务完成状态的切换：

document.getElementById('task-list').addEventListener('change', function(e) {
  if (e.target.type === 'checkbox') {
    const taskElement = e.target.closest('.task-item');
    const taskId = parseInt(taskElement.dataset.id);
    toggleTaskStatus(taskId);
  }
});

function toggleTaskStatus(taskId) {
  const task = tasks.find(t => t.id === taskId);
  if (task) {
    task.completed = !task.completed;
    saveToLocalStorage();
    renderTaskList();
  }
}

六、数据持久化

6.1 本地存储实现

function saveToLocalStorage() {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadFromLocalStorage() {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    tasks = JSON.parse(savedTasks);
  }
}

// 页面加载时读取数据
window.addEventListener('DOMContentLoaded', function() {
  loadFromLocalStorage();
  renderTaskList();
});

七、完整代码整合

将所有功能整合到app.js中：

// 初始化数据和DOM加载
let tasks = [];
loadFromLocalStorage();

// DOM事件监听
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('add-btn').addEventListener('click', addTask);
  document.getElementById('task-input').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') addTask();
  });
  
  document.getElementById('task-list').addEventListener('click', handleTaskActions);
  document.getElementById('task-list').addEventListener('change', function(e) {
    if (e.target.type === 'checkbox') {
      const taskId = parseInt(e.target.closest('.task-item').dataset.id);
      toggleTaskStatus(taskId);
    }
  });
});

// 核心功能函数
function addTask() { /* 前面实现的代码 */ }
function editTask(taskId) { /* 前面实现的代码 */ }
function deleteTask(taskId) { /* 前面实现的代码 */ }
function toggleTaskStatus(taskId) { /* 前面实现的代码 */ }

// 辅助函数
function renderTaskList() { /* 前面实现的代码 */ }
function saveToLocalStorage() { /* 前面实现的代码 */ }
function loadFromLocalStorage() { /* 前面实现的代码 */ }

// 事件委托处理
function handleTaskActions(e) {
  const taskElement = e.target.closest('.task-item');
  if (!taskElement) return;
  
  const taskId = parseInt(taskElement.dataset.id);
  
  if (e.target.classList.contains('edit-btn')) {
    editTask(taskId);
  } else if (e.target.classList.contains('delete-btn')) {
    deleteTask(taskId);
  }
}

八、进一步优化建议

添加输入验证：对任务标题进行更严格的验证
UI反馈：添加加载动画和操作成功提示
撤销功能：实现删除后的撤销操作
批量操作：添加全选/批量删除功能
分类筛选：按完成状态筛选任务

通过以上实现，我们完成了一个具备完整CRUD功能的任务管理系统。这个示例展示了JavaScript操作DOM、处理事件以及管理数据状态的核心技术，可以在此基础上扩展更复杂的功能。 “`

这篇文章共计约1850字，详细介绍了使用JavaScript实现新增、编辑和删除操作的完整流程，包含代码示例和实现思路。