HTML数据添加删除功能实战教程

想要创建一个简单的网页，可以方便地添加和删除数据？这篇文章将带你一步一步实现这个功能。

1. HTML结构

首先，我们需要创建一个基本的HTML结构，包含添加数据和删除数据的表单，以及用于展示数据的区域：html

数据管理

<h2>添加数据</h2>    <form id='addForm'>        <label for='name'>姓名:</label>        <input type='text' id='name' required><br><br>        <label for='age'>年龄:</label>        <input type='number' id='age' required><br><br>        <input type='submit' value='添加'>    </form>

<h2>删除数据</h2>    <form id='deleteForm'>        <label for='deleteName'>姓名:</label>        <input type='text' id='deleteName' required><br><br>        <input type='submit' value='删除'>    </form>

<h2>当前数据</h2>    <ul id='dataList'></ul>

<script>        // JavaScript代码将在这里添加    </script></body></html>

这段代码创建了以下内容：

• 标题: '数据管理'* 添加数据表单: 包含姓名和年龄的输入框，以及一个'添加'按钮。* 删除数据表单: 包含一个姓名输入框，以及一个'删除'按钮。* 当前数据列表: 使用 <ul> 元素创建一个无序列表，用于展示数据。

2. JavaScript实现

接下来，我们需要使用JavaScript来实现添加和删除数据的逻辑：javascriptconst addForm = document.getElementById('addForm');const deleteForm = document.getElementById('deleteForm');const dataList = document.getElementById('dataList');

addForm.addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交行为 const name = document.getElementById('name').value; const age = document.getElementById('age').value; const listItem = document.createElement('li'); listItem.textContent = name + ' - ' + age; dataList.appendChild(listItem); addForm.reset(); // 清空表单});

deleteForm.addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交行为 const deleteName = document.getElementById('deleteName').value; const items = dataList.getElementsByTagName('li'); for (let i = 0; i < items.length; i++) { const item = items[i]; if (item.textContent.startsWith(deleteName)) { item.remove(); break; } } deleteForm.reset(); // 清空表单});

这段代码做了以下事情：

1. 获取元素: 获取添加数据表单、删除数据表单和数据列表的DOM元素。2. 添加数据: 监听添加数据表单的'submit'事件，获取用户输入的姓名和年龄，创建一个新的列表项并将数据添加到数据列表中。3. 删除数据: 监听删除数据表单的'submit'事件，获取用户输入的姓名，遍历数据列表找到匹配的项并将其删除。

3. 运行代码

将以上HTML和JavaScript代码保存到一个名为'data.html'的文件中，然后在浏览器中打开该文件。现在，你就可以尝试添加和删除数据了！

总结

通过简单的HTML和JavaScript代码，我们实现了一个基本的数据管理页面。你可以根据自己的需求，扩展这个页面，添加更多功能，例如编辑数据、搜索数据等。