2013-03-22 144 views
2

我正在嘗試使JavaScript交替顯示多個表中每行的顏色。問題在於有些桌子根本不會被改變。所以,我想利用這個代碼來獲取表中的行:無法讓getElementsByTagName正常工作

function alternateRows(myTable) 
    var rows = document.getElementsByTagName("table").getElementsByClassName(myTable).getElementsByTagName("tr"); 

而且,在HTML:

<body onload="alternateRows('myTable')";> 
    <table class="myTable"> 

我可以,如果我用它工作得很好id屬性並將JavaScript更改爲:

var rows = document.getElementById(myTable).getElementsByTagName("tr"); 

任何建議都會很棒。謝謝!

回答

2

getElementsByTagName返回一個NodeList,這就是爲什麼它調用getElements而不是getElement。一個NodeList沒有定義「getElementsByClassName」方法,那就是你應該看到的錯誤。

您將需要使用循環。也知道你可以使用CSS選擇器,所有現代瀏覽器都支持這個,除了IE 8和更低版本。

CSS的現代瀏覽器(或IE8-具有例如助手庫,像ie9.js

table.mytable tr:nth-child(odd) { 
    background-color: black; 
} 
table.mytable tr:nth-child(even) { 
    background-color: white; 
} 
+0

那麼接下來你如何從一個標籤獲得一個特定的類? – user2198320 2013-03-22 08:38:34

+0

@ user2198320:我相信我在回答中顯示了這一點。該屬性名爲'.className':https://developer.mozilla.org/en-US/docs/DOM/element.className。 – 2013-03-22 08:41:42

+0

噢,我明白了。如果我只能使用班級和無身份證件,我該怎麼辦? – user2198320 2013-03-22 08:44:13

0

試試這個:

只能通過getElementsByTagNamegetElementsByClassName 像使用

var rows = document.getElementsByTagName("table")[0].getElementsByTagName("tr"); 

var rows = document.getElementsByClassName('myTable')[0].getElementsByTagName("tr"); 

或使用querySelectorAll

語法:

var matches = document.querySelectorAll("div.note, div.alert");

在你例如:

var rows = document.querySelectorAll("table."+myTable).getElementsByTagName("tr"); 

getElementsByTagName給陣列,所以你應該使用 同爲getElementsByClassName

https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagNamehttps://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

+0

感謝您的回覆,但第一種方式沒有奏效。我嘗試了沒有getElementsByTagName,它的工作,但沒有當我嘗試多個表。 – user2198320 2013-03-22 08:41:47

+0

@ user2198320是的,你是對的。在這種情況下,它將使用'getElementsByTagName'或'getElementsByClassName'。 – 2013-03-22 08:50:49

2

有兩種DOM方法:

  1. 方法,返回到單個節點的參考。例如getElementByIdquerySelector

  2. 方法返回列表節點。例如,getElementsByTagName,getElementsByClassName,querySelectorAll

那些返回節點列表的方法通常會返回一個具有非常有限接口的NodeList[MDN]對象。你所能做的就是訪問列表中的單個元素,就像一個數組一樣,它不是而是與DOM節點(或元素)具有相同的接口。

如果你想打電話在列表中的元素進一步的DOM方法或DOM屬性,你可以直接用它的索引,或者迭代訪問特定節點上列表,併爲每個元素這樣做:

var elements = document.getElementsByTagName('div'); 

for(var i = 0, l = elements.length; i < l; i++) { 
    // do something with elements[i] 
} 

注意NodeList s爲通常,這意味着對任何DOM變化(例如除去div元件)將自動更新列表。


在您的具體情況,你必須選擇:

  1. 使用querySelectorAll選擇的所有行:

    var rows = document.querySelectorAll('table.' + myTable + ' tr'); 
    
  2. 或迭代選擇的元素:

    var rows = []; 
    var tables = document.getElementsByTagName("table"); 
    for (var i = 0, l = tables.length; i < l; i++) { 
        // check whether it is a table with class in the variable `myTable` 
        if ((' ' + tables[i].className + ' ').indexOf(' ' + myTable + ' ') > -1) { 
         rows = rows.concat(tables[i].getElementsByTagName('tr')); 
        } 
    } 
    

    而不是通過標記名稱選擇元素,然後測試其類,您可以直接使用getElementsByClassName來代替,但它不如querySelectorAll那樣得到廣泛支持。

0

如果所有的表都必須以同樣的方式進行修改,你可以用下面的代碼:

var tables = document.getElementByTagName("table"); 
for (var i in tables) 
{ 
    var rows = tables[i].getElementByTagName("tr"); 
    //Alternating code here 
}