JavaScript：统计动态表格输入值出现次数功能求助

原代码的核心问题 #

• 输入框获取错误：原代码用document.getElementById('box['+i+']')，但动态生成的输入框id是tab[${i}]，而且事件参数data就是当前触发的输入框元素，直接用data.value就能拿到当前值，完全没必要再通过id查找。
• 统计逻辑错误：通过table.innerHTML.split(/\W+/)解析HTML内容来统计，会把标签、属性文本等无关内容都算进去，根本无法准确统计输入框的实际值。

修正后的myFunc函数 #

function myFunc(data, i) {
    // 获取当前输入框的取值（trim去除前后空格，可根据需求移除）
    const currentValue = data.value.trim();
    // 精准获取表格内所有文本输入框
    const allInputs = document.querySelectorAll('#gen-table input[type="text"]');
    // 遍历统计相同值的出现次数
    let occurrence = 0;
    allInputs.forEach(input => {
        if (input.value.trim() === currentValue) {
            occurrence++;
        }
    });
    console.log(occurrence);
}

额外说明 #

• 如果需要多次调用generateTab生成多个表格，注意不要重复使用gen-table这个id，建议改用类选择器或者动态生成唯一id，避免DOM元素冲突。
• trim()用于忽略输入值前后的空格干扰，如果业务不需要过滤空格，直接去掉即可。

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