使用JavaScript验证HTML动态表格单元格值不重复

首先得指出你当前代码的问题：td:contains()选择器是匹配单元格的显示文本，但你的需求是基于单元格的value属性做验证，而且当前的判断逻辑也容易出错（比如如果有多个符合条件的行，length ==1的判断就失效了）。

下面是针对你的需求的两种可行解决方案：

方案一：遍历表格行直接验证value属性 #

这种方法适合表格行数不多的场景，直接遍历已有行，对比目标单元格的value属性：

var tBody = $("#tablaAplicaciones > TBODY")[0]; //Add Row.
var row = tBody.insertRow(-1);
//Add Name cell.
var cell = $(row.insertCell(-1));
cell.html(nameCountry);
cell.val(idCountry);
//Add Country cell.
cell = $(row.insertCell(-1));
cell.html(nameCompany);
cell.val(idCompany);

// 定义要验证的目标value值
const targetCountryId = idCountry;
const targetCompanyId = idCompany;

// 检查是否存在重复的行组合
const hasDuplicate = $('#tablaApp tbody tr').some(function() {
  // 获取当前行第一个单元格的value
  const currentCountryVal = $(this).find('td:first').val();
  // 获取当前行第二个单元格的value
  const currentCompanyVal = $(this).find('td:eq(1)').val();
  // 精准匹配两个value属性
  return currentCountryVal === targetCountryId && currentCompanyVal === targetCompanyId;
});

if (hasDuplicate) {
  // 处理重复逻辑：比如提示用户、移除刚插入的行
  alert('该国家与公司的组合已存在，无法重复添加！');
  row.remove();
} else {
  // 无重复，执行后续操作
}

代码说明： #

• 用jQuery.some()遍历每一行，只要找到一组匹配的value组合就返回true，表示存在重复
• 通过td:first和td:eq(1)定位每行的两个目标单元格，用.val()获取你之前设置的value属性值
• 直接对比属性值，完全避开了显示文本的干扰，验证更精准

方案二：缓存已有的组合（性能优化版） #

如果表格会添加大量行，每次遍历所有行的效率会越来越低，建议用Set来缓存已经添加过的组合：

// 定义全局或表格级别的缓存集合，用来存储已有的value组合
const existingPairs = new Set();

// 添加行的逻辑
var tBody = $("#tablaAplicaciones > TBODY")[0]; //Add Row.
var row = tBody.insertRow(-1);
//Add Name cell.
var cell = $(row.insertCell(-1));
cell.html(nameCountry);
cell.val(idCountry);
//Add Country cell.
cell = $(row.insertCell(-1));
cell.html(nameCompany);
cell.val(idCompany);

// 生成唯一的组合键
const pairKey = `${idCountry}-${idCompany}`;

if (existingPairs.has(pairKey)) {
  // 存在重复，处理逻辑
  alert('该组合已存在！');
  row.remove();
} else {
  // 无重复，将组合加入缓存
  existingPairs.add(pairKey);
  // 执行后续操作
}

代码说明： #

• 用${idCountry}-${idCompany}生成唯一的组合键，存储在Set中
• 每次添加行前只需要检查Set中是否存在该键，时间复杂度是O(1)，比遍历行的O(n)高效很多
• 尤其适合表格行数较多的场景，性能优势明显

内容的提问来源于stack exchange，提问作者Diego González