JavaScript动态表格中下拉选择框的交互与数据获取教程

<button type="button" id="add">添加新行</button>
<button type="button" id="get">获取所有选中值</button>

<table class="table table-bordered mt-3">
  <tbody id="employee-table">
    <tr>
      <td>
        <select class="form-select" aria-label="默认下拉菜单">
          <option value="" selected>请选择...</option>
          <option value="pause">暂停</option>
          <option value="height_plus">高度+</option>
          <option value="height_minus">高度-</option>
        </select>
      </td>
      <td><input type="number" class="form-control" placeholder="输入数字" /></td>
      <td>
        <button type="button" class="btn btn-outline-danger delete" hidden>
          <i class="bi bi-x-circle"></i> 删除
        </button>
      </td>
      <td class="handle">
        <span class="input-group-text">
          <i class="bi bi-grip-horizontal"></i>
        </span>
      </td>
    </tr>
  </tbody>
</table>

document.addEventListener('DOMContentLoaded', () => {
  const tableBody = document.getElementById("employee-table");
  const addButton = document.getElementById("add");
  const getButton = document.getElementById("get");

  // 1. 添加新行功能
  // 通过克隆第一行来创建新行，避免重复构建HTML字符串
  addButton.addEventListener("click", () => {
    // 克隆第一行，true 表示深克隆（包括子元素）
    const newRow = tableBody.firstElementChild.cloneNode(true);

    // 清空克隆行中的值，使其成为一个干净的新行
    const selectElement = newRow.querySelector("select");
    if (selectElement) {
      selectElement.value = ""; // 重置下拉框选择
      // 确保第一个option被选中，或根据需要设置默认值
      selectElement.querySelector('option[value=""]').selected = true;
    }

    const inputElement = newRow.querySelector("input[type='number']");
    if (inputElement) {
      inputElement.value = ""; // 清空输入框
    }

    // 显示新行中的删除按钮
    const deleteButton = newRow.querySelector(".delete");
    if (deleteButton) {
      deleteButton.hidden = false;
    }

    // 将新行添加到表格的tbody中
    tableBody.appendChild(newRow);
  });

  // 2. 删除行功能 (使用事件委托)
  // 监听表格body的点击事件，判断是否点击了删除按钮
  tableBody.addEventListener("click", (e) => {
    // 使用 closest 查找最近的匹配 .delete 类的按钮
    const deleteButton = e.target.closest("button.delete");

    // 如果点击的不是删除按钮，则不执行任何操作
    if (!deleteButton) return;

    // 确保至少保留一行，防止表格完全为空
    if (tableBody.children.length > 1) {
      // 找到删除按钮所在的行并移除
      deleteButton.closest("tr").remove();
    } else {
      alert("至少需要保留一行。");
    }
  });

  // 3. 获取单个下拉选择框的选中值 (使用事件委托)
  // 监听表格body的 change 事件，当下拉框值改变时触发
  tableBody.addEventListener("change", (e) => {
    // 使用 closest 查找最近的匹配 .form-select 类的下拉框
    const selectElement = e.target.closest(".form-select");

    // 如果改变的不是下拉框，则不执行任何操作
    if (!selectElement) return;

    // 打印当前下拉框的选中值
    console.log("当前下拉框选中值:", selectElement.value);
    // 可以在这里添加其他处理逻辑，例如更新UI或发送数据
  });

  // 4. 获取所有下拉选择框的选中值
  // 当点击“获取所有选中值”按钮时执行
  getButton.addEventListener("click", () => {
    // 查找表格中所有的 .form-select 元素
    const allSelectElements = tableBody.querySelectorAll(".form-select");

    // 使用 map 遍历所有下拉框，提取它们的选中值
    const selectedValues = [...allSelectElements].map(select => select.value);

    // 打印所有选中值数组
    console.log("所有下拉框选中值:", selectedValues);
    // 可以在这里将这些值用于表单提交或进一步处理
  });
});