求助：实现支持动态添加输入字段的HTML表单（附代码）

嘿，我帮你完善了这个支持动态添加输入字段的时间计算表单，下面是完整的实现方案，包含动态增删行、时间计算和表单验证的核心功能，完全适配你给出的初始代码结构：

<!DOCTYPE html>
<html>
<head>
    <title>Time Calculation Form</title>
    <style>
        .time-row {
            margin-bottom: 10px;
        }
        .time-row td {
            padding: 0 10px;
        }
        .remove-btn {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
        }
        .add-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        fieldset {
            padding: 20px;
            width: fit-content;
        }
    </style>
</head>
<body>
    <form name="calculate" onSubmit="return submitForm(this)">
        <fieldset>
            <legend>Calculate Time</legend>
            Perform by: <input type="text" name="perform" id="perform" required><br/><br/>
            
            <div id="time-rows-container">
                <!-- 初始默认行 -->
                <div class="time-row">
                    <table border="0">
                        <tr>
                            <td>Date:</td>
                            <td><input type="date" name="date[]" required></td>
                            <td>Start Time:</td>
                            <td><input type="time" name="startTime[]" required></td>
                            <td>Stop Time:</td>
                            <td><input type="time" name="stopTime[]" required></td>
                            <td><button type="button" class="remove-btn" onclick="removeRow(this)">Remove</button></td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <button type="button" class="add-btn" onclick="addNewRow()">Add New Time Entry</button>
            <br/><br/>
            <input type="submit" value="Calculate Total Time">
        </fieldset>
    </form>

    <script>
        // 添加新的时间记录行
        function addNewRow() {
            const container = document.getElementById('time-rows-container');
            const newRow = document.createElement('div');
            newRow.className = 'time-row';
            // 复用和初始行一致的结构
            newRow.innerHTML = `
                <table border="0">
                    <tr>
                        <td>Date:</td>
                        <td><input type="date" name="date[]" required></td>
                        <td>Start Time:</td>
                        <td><input type="time" name="startTime[]" required></td>
                        <td>Stop Time:</td>
                        <td><input type="time" name="stopTime[]" required></td>
                        <td><button type="button" class="remove-btn" onclick="removeRow(this)">Remove</button></td>
                    </tr>
                </table>
            `;
            container.appendChild(newRow);
        }

        // 删除指定的时间记录行
        function removeRow(btn) {
            const totalRows = document.querySelectorAll('.time-row').length;
            // 至少保留一行记录，避免表单无数据
            if (totalRows > 1) {
                btn.closest('.time-row').remove();
            } else {
                alert('至少需要保留一条时间记录哦');
            }
        }

        // 表单提交处理：计算总时长并验证数据
        function submitForm(form) {
            event.preventDefault(); // 先阻止默认提交，完成计算后可按需提交
            
            const dates = form['date[]'];
            const startTimes = form['startTime[]'];
            const stopTimes = form['stopTime[]'];
            let totalMinutes = 0;

            // 遍历每一行计算单条记录时长
            for (let i = 0; i < startTimes.length; i++) {
                // 用固定日期包装时间，避免日期差异影响计算
                const start = new Date(`2000-01-01T${startTimes[i].value}`);
                const stop = new Date(`2000-01-01T${stopTimes[i].value}`);
                const diffMs = stop - start;
                const diffMins = Math.floor(diffMs / (1000 * 60));
                
                // 验证结束时间不能早于开始时间
                if (diffMins < 0) {
                    alert(`第${i+1}条记录的结束时间不能早于开始时间，请修正`);
                    return false;
                }
                totalMinutes += diffMins;
            }

            // 转换为小时+分钟的格式展示
            const totalHours = Math.floor(totalMinutes / 60);
            const remainingMins = totalMinutes % 60;
            alert(`执行者: ${form.perform.value}\n总耗时: ${totalHours}小时${remainingMins}分钟`);
            
            // 如果需要提交到后端，取消下面的注释即可
            // form.submit();
            return true;
        }
    </script>
</body>
</html>

核心功能说明 #

• 动态增删行：点击「Add New Time Entry」可添加新的时间记录行，每行的「Remove」按钮可删除该行（保留至少一行）
• 数据验证：通过required属性实现浏览器基础必填验证，提交时额外检查结束时间合理性
• 时间计算：将时间转换为Date对象计算差值，汇总后转换为易读的小时+分钟格式
• 后端友好：所有动态字段使用数组命名（name="date[]"），后端可直接接收一组数据

可选优化建议 #

• 增加日期合理性验证：限制日期不晚于当前日期
• 加入实时计算：每一行输入完成后，自动显示该行的耗时
• 本地存储：用localStorage保存用户输入的记录，页面刷新后自动恢复
• 样式增强：添加响应式布局，适配移动端显示

内容的提问来源于stack exchange，提问作者Anzu Pang