0

このコードは表を操作して、ソフトウェア機能を並べて表示します (人々がそれらを比較できるようにするため)。誰かが特定のソフトウェア アイコンをクリックすると、そのソフトウェアの機能が表で表示または非表示になります。

以下のコードは IE9 では完全に機能しfeatures.querySelectorAllますが、Chrome ではヘッダー/列を設定しません。

element.querySelectorAllChrome では動作しませんか?

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 に答える