如何比对HTML表格下拉框用户选择值与对象数组存储值

核心修改点 #

• 保留原有Bootstrap表格基础样式，name列维持纯文本展示，keyUnit、unit2、unit3三列替换为下拉选择组件
• 提前提取所有字段的可选值做去重处理，补充空选项适配无中间名的人员条目
• 新增校验触发按钮，点击后逐行匹配用户选择值和预定义的tabledata数据
• 校验不通过时给错误单元格加红色边框高亮，通过则弹出成功提示

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格下拉校验</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container mt-4">
  <div class="row">
    <div class="col-12">
      <div class="table-responsive" id="table1"></div>
      <button id="checkBtn" class="btn btn-primary mt-3">提交校验</button>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
<script>
const tabledata = [{
    name: "George Clooney",
    keyUnit: "Clooney",
    unit2: "George",
    unit3: "",
  },
  {
    name: "George A. Clooney",
    keyUnit: "Clooney",
    unit2: "George",
    unit3: "A",
  },
  {
    name: "George Allan Clooney",
    keyUnit: "Clooney",
    unit2: "George",
    unit3: "Allan",
  },
  {
    name: "George Robert Clooney",
    keyUnit: "Clooney",
    unit2: "George",
    unit3: "Robert",
  },
  {
    name: "Simon Cowell",
    keyUnit: "Cowell",
    unit2: "Simon",
    unit3: "",
  },
];
const headers = ["name", "key Unit", "unit2", "unit3"];
// 提前收集各列下拉选项并去重
const selectOptions = {
  keyUnit: [...new Set(tabledata.map(item => item.keyUnit))],
  unit2: [...new Set(tabledata.map(item => item.unit2))],
  unit3: [...new Set(tabledata.map(item => item.unit3))]
}

const generateTable = (tableID) => {
  let selectedTable = document.querySelector(`#${tableID}`);
  let table = document.createElement("table");
  table.classList.add("table", "custom", "table-bordered");
  let headerRow = document.createElement("tr");
  headers.forEach((headerText) => {
    let header = document.createElement("th");
    let textNode = document.createTextNode(headerText);
    header.appendChild(textNode);
    headerRow.appendChild(header);
  });
  table.appendChild(headerRow);

  tabledata.forEach((rowData, rowIndex) => {
    let row = document.createElement("tr");
    // 遍历字段，name列渲染文本，其他列渲染下拉框
    Object.entries(rowData).forEach(([field, value]) => {
      let cell = document.createElement("td");
      if(field === 'name'){
        let textNode = document.createTextNode(value);
        cell.appendChild(textNode);
      }else{
        let select = document.createElement("select");
        select.classList.add("form-control", "form-control-sm");
        select.dataset.row = rowIndex;
        select.dataset.field = field;
        // 添加默认空选项
        let defaultOpt = document.createElement("option");
        defaultOpt.value = "";
        defaultOpt.textContent = "请选择";
        select.appendChild(defaultOpt);
        // 添加对应字段的所有可选值
        selectOptions[field].forEach(optVal => {
          let opt = document.createElement("option");
          opt.value = optVal;
          opt.textContent = optVal || '（空）';
          select.appendChild(opt);
        })
        cell.appendChild(select);
      }
      row.appendChild(cell);
    });
    table.appendChild(row);
  });
  selectedTable.appendChild(table);
};

// 校验逻辑
document.querySelector("#checkBtn").addEventListener("click", () => {
  let isAllCorrect = true;
  // 清除之前的错误高亮
  document.querySelectorAll("select").forEach(sel => {
    sel.classList.remove("border", "border-danger");
  })
  // 逐行逐字段比对选择值和正确答案
  tabledata.forEach((rowData, rowIndex) => {
    ['keyUnit', 'unit2', 'unit3'].forEach(field => {
      let select = document.querySelector(`select[data-row="${rowIndex}"][data-field="${field}"]`);
      if(select.value !== rowData[field]){
        isAllCorrect = false;
        select.classList.add("border", "border-danger");
      }
    })
  })
  if(isAllCorrect){
    alert("所有答案正确");
  }else{
    alert("存在错误选项，请检查标红的下拉框");
  }
})

generateTable("table1");
</script>
</body>
</html>

效果说明 #

• 页面加载后自动生成带下拉选择框的Bootstrap表格，用户可在三个可选列点选对应值
• 点击提交校验按钮后，系统自动比对所有选择值和预设正确答案
• 错误选项会自动加红色边框提示，全部选对弹出成功提示，选错弹出错误提示

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