如何检查HTML表格所有行列的单元格值 实现输入内容唯一性校验

核心实现逻辑 #

我们需要先遍历表格已有的所有数据行（跳过表头行），将行内单元格值与用户输入内容做匹配，存在完全匹配的内容时直接弹出提示，无匹配内容再执行新行插入操作。 #

完整修改后代码 #

$(function(){
  $('#add').on('click',function(){
      // 获取输入值并去除首尾空格，避免空格导致的校验误差
      const field1 = $('#field1').val().trim();
      const field2 = $('#field2').val().trim();
      const field3 = $('#field3').val().trim();

      // 可选：新增非空校验，避免空内容插入
      if (!field1 || !field2 || !field3) {
        alert('请填写全部字段内容');
        return;
      }

      let isDuplicate = false;
      // 遍历所有数据行（排除第一行表头）
      $('#table tr:not(:first-child)').each(function() {
        const tds = $(this).find('td');
        // 提取当前行三个字段的值
        const rowVal1 = tds.eq(0).text().trim();
        const rowVal2 = tds.eq(1).text().trim();
        const rowVal3 = tds.eq(2).text().trim();
        // 三个字段完全匹配判定为重复
        if (rowVal1 === field1 && rowVal2 === field2 && rowVal3 === field3) {
          isDuplicate = true;
          // 终止遍历，减少性能消耗
          return false;
        }
      })

      if (isDuplicate) {
        alert('existed');
        return;
      }

      // 无重复则插入新行
      const newRow = `<tr><td>${field1}</td><td>${field2}</td><td>${field3}</td></tr>`;
      $('#table').append(newRow);
      // 可选：插入完成后清空输入框
      $('#field1, #field2, #field3').val('');
  });
});

校验规则扩展 #

如果你的需求是任意单个输入值不能和表格所有单元格内容重复，只需替换上述的遍历校验逻辑即可：

// 遍历表格所有单元格
$('#table td').each(function() {
  const cellText = $(this).text().trim();
  // 任意输入值和单元格内容匹配即判定为重复
  if (cellText === field1 || cellText === field2 || cellText === field3) {
    isDuplicate = true;
    return false;
  }
})

内容的提问来源于stack exchange，提问作者WEI ZHUANG GOH