请求实现表格动态增列与增行功能：表单提交添列、添加员工行

现有一个id为criteria-table的双层表头表格，下方配有ADD CRITERIA和ADD EMPLOYEE按钮，需完成以下交互：

• 点击ADD CRITERIA：弹出popup-add模态表单，提交后为所有员工行新增对应指标列（包含Priority、Criteria、Unit三个子列）
• 点击ADD EMPLOYEE：弹出员工选择模态框，添加包含当前所有指标列的新员工行

现有代码 #

表格代码 #

<table id="criteria-table">
  <thead>
    <tr>
      <th rowspan="2" class="text-center align-middle">#</th>
      <th rowspan="2" class="text-center align-middle">Employee</th>
      <th colspan="3" class="text-center">Order</th>
    </tr>
    <tr>
      <th class="text-center">Priority</th>
      <th class="text-center">Criteria</th>
      <th class="text-center">Unit</th>
    </tr>
  </thead>

  <tbody>
    <tr class="tr_template">
      <td class="text-center">1</td>
      <td class="text-center">Employee A</td>
      <td class="text-center">75%</td>
      <td class="text-center">10</td>
      <td class="text-center">order</td>
    </tr>
  </tbody>
</table>

操作按钮代码 #

<a class="btn btn-add-criteria  btn-sm m-btn--icon color" href="javascript:void(0)">
  <i class="la la-plus"></i>ADD CRITERIA
</a>

<a class="btn btn-add-employee  btn-sm m-btn--icon color" href="javascript:void(0)">
  <i class="la la-plus"></i>ADD EMPLOYEE
</a>

新增指标模态表单代码 #

<div class="modal fade" id="popup-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content clear-form">
      <!-- Body modal -->
      <div class="modal-body">

        <!-- Form -->
        <form id="frm-add-criteria">
          <div class="row">
            <div class="col-lg-12">
              <div class="m-form__group">
                <div class="criteria-content">

                  <!-- Criteria -->
                  <div class="row modal-row">
                    <div class="col-12">
                      <label class="font-weight-bold">Criteria</label>
                      <div class="input-group">
                        <select name="kpi_criteria_id" id="kpi_criteria_id" class="form-control">
                          <option value="1">Order</option>
                          <option value="2">Contract</option>
                          <option value="3">Revenue</option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <!-- Priority -->
                  <div class="row modal-row">
                    <div class="col-12">
                      <label class="font-weight-bold">Priority</label>
                      <div class="input-group">
                        <input type="text" class="form-control" id="priority" name="priority" placeholder="Input criteria" aria-describedby="basic-addon2">
                      </div>
                    </div>
                  </div>

                  <!-- Amount -->
                  <div class="row modal-row">
                    <div class="col-12">
                      <label class="font-weight-bold">Amount</label>
                      <div class="input-group">
                        <input type="text" class="form-control" id="kpi_value" name="kpi_value" placeholder="Input amount" aria-describedby="basic-addon2">
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>

          <!-- Footer modal -->
          <div class="modal-footer">
            <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit ss--width--100">
              <div class="m-form__actions m--align-right">
                <button data-dismiss="modal" class="btn btn-metal bold-huy m-btn m-btn--icon m-btn--wide m-btn--md">
                  <span class="ss--text-btn-mobi">
                    <i class="la la-arrow-left"></i>
                    <span>CANCEL</span>
                  </span>
                </button>

                <button type="submit" onclick="" id="btn-save-criteria" class="btn btn-success color_button son-mb  m-btn m-btn--icon m-btn--wide m-btn--md btn_add_close m--margin-left-10">
                  <span class="ss--text-btn-mobi">
                    <i class="la la-check"></i>
                    <span>SAVE</span>
                  </span>
                </button>
              </div>
            </div>
          </div>

        </form>

      </div>
    </div>
  </div>
</div>

功能实现技术建议 #

一、ADD CRITERIA 功能实现 #

1. 表单提交监听

   • 给frm-add-criteria绑定submit事件，阻止默认跳转行为
   • 提取表单数据：选中的指标名称（下拉框文本）、Priority值、Amount值

2. 更新双层表头

   • 在表头第一行（带colspan的行）末尾新增<th>，设置colspan="3"，文本为选中的指标名称，继承text-center样式
   • 在表头第二行末尾依次添加三个<th>，文本分别为"Priority"、"Criteria"、"Unit"，保持样式一致

3. 批量更新员工行

   • 遍历<tbody>下所有员工行
   • 给每一行末尾追加三个<td>，内容分别为表单获取的Priority值、Amount值、指标名称（小写单位），添加text-center样式

4. 收尾处理

   • 清空表单输入框，重置下拉框选项
   • 调用Bootstrap模态框关闭方法：$('#popup-add').modal('hide')

二、ADD EMPLOYEE 功能实现 #

1. 构建员工选择模态框

   • 参考现有模态框结构，创建id为popup-add-employee的模态框，内部添加员工选择下拉框/列表
   • 添加确认按钮，用于触发新增员工行操作

2. 按钮事件绑定

   • 给btn-add-employee绑定click事件，触发显示员工选择模态框

3. 生成新员工行

   • 获取当前表头第二行的列数，确保新行列数匹配
   • 复制tr_template结构，修改序号为当前员工行数+1，员工名称为选中值
   • 指标列单元格填充默认值（如"0%"、"0"），保持样式统一
   • 将新行追加到<tbody>末尾

4. 数据一致性保障

   • 后续新增指标列时，自动同步到所有员工行（包括新添加的行）

关键注意事项 #

• 动态生成元素使用事件委托，避免事件失效
• 统一单元格样式类，保证视觉一致性
• 封装表头、行生成函数，减少重复代码
• 若需持久化数据，可将表格数据存储到localStorage或提交至后端接口

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