0

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

下面的代码在 IE9 中完美运行，但features.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';
            }
        }
    }
}

<table class="apps">
    <tr>
        <td id="npg206" class="selected" onclick="viewfeature(this);"><img src="images/app-npg206.png" title="NamePrint Graphics 2.06"/></td>
        <td id="npg2061" class="selected" onclick="viewfeature(this);"><img src="images/app-npg2061.png" title="NamePrint Graphics 2.061"/></td>
        <td id="npg30" class="selected" onclick="viewfeature(this);"><img src="images/app-npg30.png" title="NamePrint Graphics 3.0"/></td>
        <td id="npgo" class="selected" onclick="viewfeature(this);"><img src="images/app-npo.png" title="NPG Online"/></td>
        <td id="npgw" class="selected" onclick="viewfeature(this);"><img src="images/app-npw.png" title="NPG Web"/></td>
        <td id="npgj" class="selected" onclick="viewfeature(this);"><img src="images/app-npj.png" title="NPG Java"/></td>
        <td id="enpg" class="selected" onclick="viewfeature(this);"><img src="images/app-enp.png" title="E-store NPG"/></td>
        <td id="tagw" class="selected" onclick="viewfeature(this);"><img src="images/app-tag.png" title="Tagware"/></td>
        <td id="word" class="selected" onclick="viewfeature(this);"><img src="images/app-word.png" title="Word Templates"/></td>
    </tr>
</table>
<table class="birdseyeview" id="birdseye">
    <tr>
        <th class="subcat">Restrictions</th>
        <th value="npg206">NPG 2.06</th>
        <th value="npg2061">NPG 2.061</th>
        <th value="npg30">NPG 3.0</th>
        <th value="npgo">NPG Online</th>
        <th value="npgj">NPG Java</th>
        <th value="npgw">NPG Web</th>
        <th value="enpg">E-NPG</th>
        <th value="tagw">TagWare</th>
        <th value="word">Word</th>
    </tr>
    <tr>
        <td>Administrator rights<span>Example:<br/><img src="images\admin.png" alt="Administrative Rights"/></span></td>
        <td value="npg206" class="green"></td>
        <td value="npg2061" class="green"></td>
        <td value="npg30" class="green"></td>
        <td value="npgo" class="green"><span>If Silverlight isn't installed</span></td>
        <td value="npgj"></td>
        <td value="npgw"></td>
        <td value="enpg"></td>
        <td value="tagw" class="green"></td>
        <td value="word"></td>
    </tr>
    <tr>
        <td>Internet access</td>
        <td value="npg206"></td>
        <td value="npg2061"></td>
        <td value="npg30"></td>
        <td value="npgo" class="green"></td>
        <td value="npgj"></td>
        <td value="npgw" class="green"></td>
        <td value="enpg" class="green"></td>
        <td value="tagw"></td>
        <td value="word"></td>
    </tr>

4

1 回答 1

1

这就是问题所在。这是你正在做.value的而不是.getAttribute("value")在一个th元素上。

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

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

IE 会将属性映射.value到value="..."属性，但 Chrome 不会正确地执行此操作。一个th元素没有原生.value属性，所以不应该有这样的映射。

您最好使用 HTML5data-属性来实现前向兼容性。

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

然后在旧浏览器中：

headers[i].getAttribute("data-value")

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

headers[i].data.value
于 2012-12-03T18:34:48.277 回答