Bootstrap新手求助：Table#1新增行同步至Table#2的异常问题

设置两个工时表（Table#1和Table#2），期望仅在Table#1中添加多行数据，但点击Table#1的加号按钮时，新增数据会同步出现在Table#2里。

问题原因 #

代码中使用了全局的.table类选择器，导致所有带table类的表格都会被选中并执行相同操作：

• var TABLE = $(".table")会同时选中Table#1和Table#2
• 点击加号时TABLE.append(clone)会把克隆的行添加到所有表格中
• 时间选择器的事件绑定在.table上，会影响所有表格内的对应元素
• 计算总和时，会遍历页面中所有.total_hours_hidden和.total_minutes_hidden元素，包括Table#2的隐藏列

解决方案 #

给Table#1添加唯一ID，通过ID精准定位Table#1，避免操作影响到Table#2。

修改后的Table#1 HTML代码 #

<div class="card-body">
  <div id="table" class="table-editable">
    <span class="table-add glyphicon glyphicon-plus"></span>
    <!-- 给Table#1添加唯一ID workTimeTable -->
    <table id="workTimeTable" class="table table-bordered table-responsive-md table-striped text-center">
      <tbody>
        <tr>
          <th>DATE</th>
          <th>START TIME</th>
          <th>SITE NAME</th>
          <th>TASK</th>
          <th>OTHERS</th>
          <th>BREAK TIME START</th>
          <th>BREAK TIME FINISH</th>
          <th>END TIME</th>
          <th style="display:none">HOURS HIDDEN</th>
          <th style="display:none">Minutes HIDDEN</th>
        </tr>

      </tbody>
      <tbody>
        <!-- 可克隆的表格行 -->
        <tr class="hide">
          <td><input type="date" size="1" class="date"></td>
          <td><input type="time" class="appt1" name="appt" required=""></td>
          <td><input type="text" size="10"></td>
          <td><input type="text" size="10"></td>
          <td><input type="text" size="10"></td>
          <td><input type="time" class="appt2" id="appt2" name="appt" required=""></td>
          <td><input type="time" class="appt3" id="appt3" name="appt" required=""></td>
          <td><input type="time" class="appt4" id="appt4" name="appt" required=""></td>
          <td class="total_hours_hidden" style="display:none">0</td>
          <td class="total_minutes_hidden" style="display:none"> 0</td>
          <td class="table-remove"> x</td>
        </tr>
      </tbody>
    </table>
  </div>

  <button class="compute_button">
    Calculate
  </button>

  <table style="width: 100%">
    <colgroup>
      <col span="1" style="width: 15%;">
      <col span="1" style="width: 70%;">
    </colgroup>
    <tbody>
      <tr>
        <th>Total Hours: </th>
        <th>
          <div class="total_hours_worked" style="display:inline"></div>:
          <div class="total_minutes_worked" style="display:inline"></div>
        </th>
      </tr>
    </tbody>
  </table>
</div>

修改后的JavaScript代码 #

$(function () {
  // 仅选中Table#1
  var TABLE = $("#workTimeTable");

  var start_time;
  var end_time;
  var break_time_start;
  var break_time_end;
  var add_time;
  var hours_array = [];
  var minutes_array = [];

  // 事件绑定到Table#1
  $('#workTimeTable').on('change', '.appt1', function () {
    start_time = $(this).val();
  });

  // 休息开始时间
  $('#workTimeTable').on('change', '.appt2', function () {
    break_time_start = $(this).val();
  });

  // 休息结束时间
  $('#workTimeTable').on('change', '.appt3', function () {
    break_time_end = $(this).val();
  });

  $('#workTimeTable').on('change', '.appt4', function () {
    end_time = $(this).val();

    let end_time_with_date = moment(end_time, 'HH:mm:ss');
    let start_time_with_date = moment(start_time, 'HH:mm:ss');

    let break_time_start_with_date = moment(break_time_start, 'HH:mm:ss');
    let break_time_end_with_date = moment(break_time_end, 'HH:mm:ss');

    let compute_hours_break_time = break_time_end_with_date.diff(break_time_start_with_date, 'hours');
    let compute_minutes_break_time = parseInt(moment.utc(moment(break_time_end_with_date, "HH:mm:ss").diff(moment(break_time_start_with_date, "HH:mm:ss"))).format("mm"))

    let compute_hours = end_time_with_date.diff(start_time_with_date, 'hours') - compute_hours_break_time;
    let compute_minutes = parseInt(moment.utc(moment(end_time_with_date, "HH:mm:ss").diff(moment(start_time_with_date, "HH:mm:ss"))).format("mm")) - compute_minutes_break_time

    $(this).closest('tbody tr').find('td:eq(8)').text(compute_hours)
    $(this).closest('tbody tr').find('td:eq(9)').text(compute_minutes)
  });

  function compute() {
    let hours_sum = 0;
    let minutes_sum = 0;
    // 仅统计Table#1中的隐藏列
    $("#workTimeTable .total_hours_hidden").each(function () {
      hours_sum += parseInt($(this).text()) || 0;
    })

    $("#workTimeTable .total_minutes_hidden").each(function () {
      minutes_sum += parseInt($(this).text()) || 0;
    })

    $(".total_hours_worked").text(hours_sum);
    $(".total_minutes_worked").text(minutes_sum);
  }

  $(".compute_button").click(function () {
    compute();
  })

  // 添加行
  $(".table-add").click(function () {
    var clone = TABLE
      .find("tr.hide")
      .clone(true)
      .removeClass("hide table-line");
    // 仅添加到Table#1
    TABLE.append(clone);
  });

  // 移除行事件绑定到Table#1
  $('#workTimeTable').on('click', '.table-remove', function () {
    $(this)
      .parents("tr")
      .detach();
    compute();
  });
})

关键修改点 #

1. 给Table#1添加唯一ID workTimeTable，替代全局的.table选择器
2. 所有针对Table#1的事件绑定、元素查找都通过ID定位，避免影响Table#2
3. 计算总和时，仅遍历Table#1内的隐藏列，确保统计数据准确

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