Javascript 在Chrome中不工作的th元素中循环的脚本

代码操纵一个表来显示彼此相邻的软件功能（以便人们可以比较它们）。当有人单击特定的软件图标时，它将在表中显示或隐藏该软件的功能

下面的代码在IE9中工作得很好，但是

功能。querySelectorAll

不会在Chrome中填充标题/列

element.querySelectorAll

是否在Chrome中不起作用

function viewfeature(feature) {
    var features = document.querySelector('#birdseye');
    var headers = features.querySelectorAll('th');
    var columns = features.querySelectorAll('td');
    if (feature.getAttribute("class") == 'selected') {
        feature.setAttribute("class", 'unselected');
        for (var i = 0; i < headers.length; i++) {
            if (headers[i].value == feature.id) {
                headers[i].style.display = 'none';
            }
        }
        for (var i = 0; i < columns.length; i++) {
            if (columns[i].value == feature.id) {
                columns[i].style.display = 'none';
            }
        }
    } else {
        feature.setAttribute("class", "selected");
        for (var i = 0; i < headers.length; i++) {
            if (headers[i].value == feature.id) {
                headers[i].style.display = 'block';
            }
        }
        for (var i = 0; i < columns.length; i++) {
            if (columns[i].value == feature.id) {
                columns[i].style.display = 'block';
            }
        }
    }
}

功能视图功能（功能）{
var features=document.querySelector（“#鸟眼”）；
var headers=features.querySelectorAll（'th'）；
var columns=features.querySelectorAll（'td'）；
if（feature.getAttribute（“类”）=“已选定”）{
setAttribute（“类”，“未选择”）；
对于（变量i=0；i

---

限制
NPG 2.06
NPG 2.061
NPG 3.0
NPG在线
NPG Java
NPG网络
E-NPG
标语牌
单词
管理员权限示例：

如果未安装Silverlight
互联网接入

---

问题就在这里。这是因为您在

th

元素上执行

.value

而不是

.getAttribute（“value”）

//if (headers[i].value == feature.id) { // Won't work in Chrome

if (headers[i].getAttribute("value") == feature.id) {

IE会将

.value

属性映射到

value=“…”

属性，但Chrome不会正确地这样做。

th

元素没有本机的

.value

属性，因此不应该有这样的映射

---

您最好使用HTML5

data-

属性来实现前向兼容性

<th data-value="npg206">NPG 2.06</th>

或者在HTML5浏览器中，您可以执行以下操作：

headers[i].data.value

---

querySelectorAll

在Chrome中运行良好。HTML是什么样子的？也许你可以制作一个简单的、自包含的示例来演示这个问题，将其发布到问题中（始终！），并将其发布到像或这样的网站上。旁注：不要将

getAttribute

和

setAttribute

与

class

一起使用，它不能可靠地跨浏览器工作（公平地说，尽管它可能适用于所有具有

querySelectorAll

的浏览器）。只需使用

className

属性，例如

if（feature.className=='selected'）

。谢谢T.J.，我已经添加了HTML代码，应该足以让示例工作出色，就是这样。非常感谢！@user1083923：上面的要点是，

value

是

th

元素上的无效属性，DOM元素不会将其反映为

value

属性。因此使用

数据-@T.J.Crowder:我想你可能通知了错误的
user\d{7}
；）时间来更改我的用户名，也许。@user1689607:我可以发誓我从列表中选择了正确的用户名，但显然不是。谢谢。：-）
headers[i].getAttribute("data-value")

headers[i].data.value