jQuery实现表格新增复制行时自动顺延填充起止时间字段

需求点 #

• 现有功能：点击添加行按钮，复制表格最后一行及行内所有输入值
• 需调整的复制规则：
  • 新行heure_debut（开始时间）字段自动填充上一行heure_fin（结束时间）的值
  • 新行heure_fin（结束时间）字段自动设置为当前新行开始时间加1小时
  • 后续每次新增行均按上述规则顺延填充时间
• 同步修复原有删除行逻辑的bug

完整修改代码 #

JS逻辑代码 #

直接替换原有脚本代码即可：

// 时间加1小时处理，自动补零、处理跨天场景
function addOneHour(timeStr) {
    if (!timeStr) return '00:00';
    const [hours, minutes] = timeStr.split(':').map(Number);
    let newHours = hours + 1;
    newHours = newHours >= 24 ? newHours - 24 : newHours;
    const pad = num => num.toString().padStart(2, '0');
    return `${pad(newHours)}:${pad(minutes)}`;
}

$("#btnAdd").on("click", function () {
    const $tableBody = $('#tbl tbody');
    const $trLast = $tableBody.find("tr:last");
    const $trNew = $trLast.clone();

    // 清除克隆行的重复id，避免DOM选择冲突
    $trNew.find('[id]').removeAttr('id');
    // 清除select2克隆残留DOM，避免样式交互异常
    $trNew.find('.select2-container').remove();
    $trNew.find('select[data-kt-select2="true"]').removeClass('select2-hidden-accessible');

    // 读取上一行结束时间，计算新行时间
    const lastEndVal = $trLast.find('input[name="heure_fin[]"]').val();
    const newStart = lastEndVal;
    const newEnd = addOneHour(newStart);

    // 赋值新行时间字段
    $trNew.find('input[name="heure_debut[]"]').val(newStart);
    $trNew.find('input[name="heure_fin[]"]').val(newEnd);

    // 插入新行
    $trLast.after($trNew);

    // 如果项目使用了Keenthemes自带的表单插件，放开对应注释初始化新行控件
    // KTSelect2.init(); // 初始化select2下拉框
    // 按实际引入的日期、时间插件调用对应初始化方法即可
});

$("#btndelete").on("click", function () {
    const $tableBody = $('#tbl tbody');
    const rowTotal = $tableBody.find('tr').length;
    // 至少保留1行，避免表格为空
    if (rowTotal <= 1) return;
    // 修复原有删除逻辑错误，直接移除最后一行
    $tableBody.find("tr:last").remove();
});

HTML优化建议 #

原有首行代码存在多个元素重复使用相同id的问题，会导致DOM选择异常，建议将首行重复id移除，调整后首行示例：

<tr class="fw-bold text-gray-600">
    <td>
        <div class="d-flex align-items-center">
            <div class="ms-5">
                <div class="error-container">
                    <input style="width: 60%" required class="form-control datecalendar" name="date[]" placeholder="YYYY-MM-DD" />
                    @if ($errors->has('date'))
                        <small class="has-error help-block help-block-error">{{ $errors->first('date') }}</small>
                    @endif
                </div>
            </div>
        </div>
    </td>
    <td class="align-items-center">
        <div class="error-container">
            <span class="fw-bolder"><input style="width: 40%" name="heure_debut[]" placeholder="HH:MM" required class="form-control" /></span>
            @if ($errors->has('heure_début'))
                <small class="has-error help-block help-block-error">{{ $errors->first('heure_début') }}</small>
            @endif
        </div>
    </td>
    <td class="align-items-center">
        <div class="form-group {{ $errors->has('heure_fin') ? ' has-error' : '' }}">
            <div class="error-container">
                <span class="fw-bolder"><input style="width: 40%" required class="form-control" placeholder="HH:MM" name="heure_fin[]" /></span>
                @if ($errors->has('heure_fin'))
                    <small class="has-error help-block help-block-error"><p class="text-danger">heure fin doit être forcément supérieure a heure début</p></small>
                @endif
            </div>
        </div>
    </td>
    <td class="align-items-center">
        <span class="fw-bolder">
            <select name="process_id[]" required class="form-select form-select-solid" data-kt-select2="true" data-placeholder="choisissez un standard">
                <option value="" disabled selected>processus</option>
                @foreach ($process as $key => $proc)
                    <option value="{{ $proc->id }}">{{ $proc->name }}</option>
                @endforeach
            </select>
        </span>
    </td>
    <td class="align-items-center">
        <span class="fw-bolder">
            <select name="user_id[]" required class="form-select form-select-solid" data-kt-select2="true" data-placeholder="choisissez une ressource/personne">
                <option value="" disabled selected>nom</option>
                @foreach ($users as $key => $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>
        </span>
    </td>
</tr>

逻辑说明 #

• 时间计算自动处理跨天场景：上一行结束时间为23:30时，新行结束时间自动计算为00:30
• 所有时间输出自动补零，始终保持HH:MM格式
• 克隆行自动清除重复id和select2残留DOM，避免控件交互异常
• 删除行增加行数校验，不会出现表格完全为空的情况
• 注意：如果首行未填写结束时间就点击新增，新行默认从00:00开始计算

内容的提问来源于stack exchange，提问作者aron colt