单页面多个表单：添加、删除数据并切换显示 - HTML 代码示例 - 常规

当然可以帮您写一个单页面有多个表单，并且每个表单都可以添加数据和删除数据的HTML文件。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Data Management</title>
    <style>
        .form-container {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Data Management</h1>

    <button onclick="showForm('form1')">Show Form 1</button>
    <button onclick="showForm('form2')">Show Form 2</button>
    <button onclick="showForm('form3')">Show Form 3</button>

    <div class="form-container" id="form1">
        <h2>Form 1</h2>
        <form id="addForm1">
            <label for="name1">Name:</label>
            <input type="text" id="name1" required><br><br>
            <label for="age1">Age:</label>
            <input type="number" id="age1" required><br><br>
            <input type="submit" value="Add">
        </form>

        <h3>Current Data</h3>
        <ul id="dataList1"></ul>
    </div>

    <div class="form-container" id="form2">
        <h2>Form 2</h2>
        <form id="addForm2">
            <label for="name2">Name:</label>
            <input type="text" id="name2" required><br><br>
            <label for="age2">Age:</label>
            <input type="number" id="age2" required><br><br>
            <input type="submit" value="Add">
        </form>

        <h3>Current Data</h3>
        <ul id="dataList2"></ul>
    </div>

    <div class="form-container" id="form3">
        <h2>Form 3</h2>
        <form id="addForm3">
            <label for="name3">Name:</label>
            <input type="text" id="name3" required><br><br>
            <label for="age3">Age:</label>
            <input type="number" id="age3" required><br><br>
            <input type="submit" value="Add">
        </form>

        <h3>Current Data</h3>
        <ul id="dataList3"></ul>
    </div>

    <script>
        function showForm(formId) {
            const formContainers = document.getElementsByClassName('form-container');
            for (let i = 0; i < formContainers.length; i++) {
                formContainers[i].style.display = 'none';
            }
            document.getElementById(formId).style.display = 'block';
        }

        function addData(formId) {
            const name = document.getElementById('name' + formId).value;
            const age = document.getElementById('age' + formId).value;
            const dataList = document.getElementById('dataList' + formId);
            const listItem = document.createElement('li');
            listItem.textContent = name + ' - ' + age;
            dataList.appendChild(listItem);
            document.getElementById('addForm' + formId).reset();
        }

        function deleteData(formId) {
            const deleteName = document.getElementById('deleteName' + formId).value;
            const dataList = document.getElementById('dataList' + formId);
            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;
                }
            }
            document.getElementById('deleteForm' + formId).reset();
        }

        for (let i = 1; i <= 3; i++) {
            const addForm = document.getElementById('addForm' + i);
            const deleteForm = document.getElementById('deleteForm' + i);

            addForm.addEventListener('submit', function(e) {
                e.preventDefault();
                addData(i);
            });

            deleteForm.addEventListener('submit', function(e) {
                e.preventDefault();
                deleteData(i);
            });
        }
    </script>
</body>
</html>

这个HTML文件包含了三个表单，每个表单有一个添加数据的功能和一个对应的删除数据的功能。通过点击按钮可以显示对应的表单，并且隐藏其他表单。每个表单的数据都会以姓名 - 年龄的格式显示在相应的当前数据列表中。

请将上述代码保存为一个名为'data.html'的文件，然后在浏览器中打开该文件，即可使用该功能。

希望这能满足您的需求！如果有其他问题，请随时提问。