动态表格表单输入控制问题（PHP/JQuery/Bootstrap）

问题根源 #

1. DOM元素ID重复：所有行的开始/结束时间选择器、删除按钮都使用了相同ID，而document.getElementById()只会返回第一个匹配的元素，导致后续行的操作都影响第一行。
2. 全局AllDay函数未正确利用行索引定位对应控件，始终操作第一行元素。

修复方案 #

通过唯一ID标识行内控件+DOM遍历定位当前行的方式解决，同时移除内联事件，改用更规范的事件委托：

修改后的完整代码

HTML部分

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<p class="text-center">Use a button below to add an availability entry.</p>
<form>
  <table class="table table-sm" id="singleAvailTable">
    <thead>
      <tr>
        <th scope="col" class="text-center w-20">Date</th>
        <th scope="col" class="text-center w-20">All Day</th>
        <th scope="col" class="text-center w-20">Start Time</th>
        <th scope="col" class="text-center w-20">End Time</th>
        <th scope="col" class="text-center w-20">Availability Note</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
  </table>
</form>
<p class="text-center">
  <button type="button" class="btn btn-primary add-single" id="addSingleBtn">Add Single Day Availability</button>
</p>

JavaScript部分

var s1 = 0;

$(document).ready(function() {
  $(".add-single").click(function() {
    $("#singleAvailTable").show();
    // 为每个控件生成唯一ID，name保持数组格式不影响表单提交
    var markup = `<tr id="row-${s1}">
      <td class="text-center w-20">
        <input type="date" class="" name="inputSingleDate[]" id="inputSingleDate-${s1}" value="<?php echo $AvailDatedate; ?>" min="<?php echo $AvailDatedate; ?>" max="<?php echo $AvailOneYear; ?>" required>
      </td>
      <td class="text-center w-20">
        <input type="hidden" name="checkAllDay[]" id="checkAllDay-${s1}" value="0">
        <input type="checkbox" class="all-day-checkbox" data-row-id="${s1}">
      </td>
      <td class="text-center w-20">
        <select id="inputStartTime-${s1}" name="inputStartTime[]" class="form-select form-select-sm start-time">
          <option selected value="08:00">8:00 AM</option>
          <option value="08:15">8:15 AM</option>
        </select>
      </td>
      <td class="text-center w-20">
        <select id="inputEndTime-${s1}" name="inputEndTime[]" class="form-select form-select-sm end-time">
          <option value="08:00">8:00 AM</option>
          <option value="08:15">8:15 AM</option>
          <option value="08:30">8:30 AM</option>
          <option value="12:00">12:00 PM</option>
          <option selected value="20:00">8:00 PM</option>
        </select>
      </td>
      <td class="text-center w-20">
        <input type="text" class="" id="inputNote-${s1}" name="inputNote[]" pattern="[a-zA-Z0-9.- ]+">
      </td>
      <td class="text-center w-20">
        <button type="button" class="btn btn-danger btn-sm row-del">Delete</button>
      </td>
    </tr>`;
    $('#singleAvailTable').find('tbody').append(markup);
    s1++;
  });

  // 事件委托处理全天复选框点击
  $("#singleAvailTable").on('click', '.all-day-checkbox', function() {
    var $row = $(this).closest('tr');
    var $hiddenInput = $(this).prev();
    // 更新隐藏字段值
    $hiddenInput.val($(this).is(':checked') ? 1 : 0);
    
    var $startTime = $row.find('.start-time');
    var $endTime = $row.find('.end-time');
    
    if (!$startTime.is(':disabled')) {
      $startTime.val('08:00').prop('disabled', true);
      $endTime.val('20:00').prop('disabled', true);
    } else {
      $startTime.prop('disabled', false);
      $endTime.val('12:00').prop('disabled', false);
    }
  });

  // 事件委托处理删除行
  $("#singleAvailTable").on('click', '.row-del', function() {
    $(this).closest('tr').remove();
  });
});

关键修改点 #

1. 唯一ID生成：用row-${s1}、inputStartTime-${s1}等格式为每个行和控件生成唯一ID，避免冲突。
2. 事件委托替代内联事件：移除复选框的内联onclick，通过jQuery事件委托绑定点击事件，利用closest('tr')快速定位当前行，无需依赖索引。
3. 类选择器定位控件：为开始/结束时间选择器添加类.start-time、.end-time，配合行元素快速找到目标控件，代码更简洁。
4. 修正删除按钮ID：将重复的RowDelID改为类.row-del，符合DOM规范。

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