仅getElementById可用，querySelector等DOM选择器失效问题求助

问题说明 #

原JS代码通过getElementById('BlockLayoutController1234')能正常实现功能：当表格第二列单元格数值小于3时，隐藏对应行的第3、4、5列单元格。但由于表格ID是BlockLayoutController加随机数字，无法固定ID，尝试替换为querySelectorAll/querySelector/getElementsByClassName后代码失效。

错误原因 #

你之前尝试的替换语句都是直接获取<td>元素，而原代码中tbl变量需要指向表格元素，后续代码依赖表格的tBodies属性获取行数据。直接替换为td元素会导致tbl.tBodies报错，进而代码终止执行。

正确实现代码 #

方案1：通过ID前缀匹配表格（最精准） #

利用CSS属性选择器匹配ID以BlockLayoutController开头的表格：

(function() {
    // 匹配ID以BlockLayoutController开头的表格
    var tbl = document.querySelector('table[id^="BlockLayoutController"]');
    if (!tbl) return; // 防止找不到表格时报错

    var rows = tbl.tBodies[0].children, 
        l = rows.length, 
        i;

    var filter = function(cells) {
        // 提取第二列的数值，判断是否小于3
        var countValue = parseFloat(cells[1].firstChild.nodeValue.replace(/,/g,''));
        return countValue >= 3;
    };

    for(i = 0; i < l; i++) {
        var shouldShow = filter(rows[i].cells);
        // 隐藏第3、4、5列（对应cells[2]、cells[3]、cells[4]）
        rows[i].cells[2].style.display = shouldShow ? '' : 'none';
        rows[i].cells[3].style.display = shouldShow ? '' : 'none';
        rows[i].cells[4].style.display = shouldShow ? '' : 'none';
    }
})();

方案2：通过父容器类选择表格 #

如果表格的父容器类固定（QRatingBlockRow TableContainer），也可以通过父容器定位表格：

// 替换方案1中的tbl获取语句即可
var tbl = document.querySelector('div.QRatingBlockRow.TableContainer table');

代码优化点 #

1. 增加表格存在性判断if (!tbl) return;，避免找不到元素时抛出错误
2. 简化filter函数逻辑，直接提取目标列数值判断，减少不必要的变量声明
3. 将filter结果存入变量shouldShow，避免重复执行三次判断，提升性能

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