腳本循環瀏覽在Chrome中不起作用的th元素

代碼操作一個表以顯示彼此相鄰的軟件特徵（以便人們可以比較它們）。當有人點擊一個特定的軟件圖標時，它會在表格中顯示或隱藏該軟件的功能。腳本循環瀏覽在Chrome中不起作用的th元素

以下代碼在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>

來源

2012-12-03 BelgoCanadian

'querySelectorAll'在Chrome中工作正常。 HTML的外觀如何？也許你可以製作一個*最小*，自包含的例子來展示問題，將它發佈到問題上（總是！），並將其發佈到像http://jsbin.com或http://jsfiddle.net這樣的站點。。 –

注意：不要使用'getAttribute'和'setAttribute'作爲'class'，它不能可靠地跨瀏覽器工作（雖然它可能適用於所有具有querySelectorAll的瀏覽器）。僅僅使用'className'屬性更容易和更直接，例如'if（feature.className ==='selected'）'。 –

感謝T.J.，我已經添加了HTML代碼，應該足以讓這個例子工作 – BelgoCanadian

這裏的問題。這是你在做.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將正確沒有做到這一點。 A th元素沒有原生.value屬性，所以不應該有這樣的映射。

爲了向前兼容，您最好使用HTML5 data-屬性。

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

然後在舊的瀏覽器：

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

或者在HTML5的瀏覽器，你可以這樣做：

headers[i].data.value

來源

2012-12-03 18:34:48

輝煌，就是這樣。太感謝了！ – BelgoCanadian

不客氣。 –

@ user1083923：上面的要點是，'value'是'th'元素的一個** invalid **屬性，DOM元素不會將其反映爲'value'屬性。因此使用'data-value'或類似的。 –

腳本循環瀏覽在Chrome中不起作用的th元素

回答

相關問題