Javascript背景表

Question

即時嘗試設置td id =「red」字段的背景顏色，但它只設置第一個，最新的問題？我認爲我將不得不設置不同的名稱？

這裏是我的代碼：

<table id="theTable"> 

    <tr> 

    <td id= "red">0 - some txt</td> 

    <td>1 - some txt</td> 

    <td>2 - some txt</td> 

    </tr> 

    <tr> 

    <td id = "red">3 - some txt</td> 

    <td>4 - some txt</td> 

    <td>5 - some txt</td> 

    </tr> 

    <tr> 

    <td><button type="button" onclick="funcion('red')">Try it</button></td> 


    </tr> 

</table> 

<script> 

function funcion (id) { 

    document.getElementById('red').style.backgroundColor = "red"; 

} 


</script> 

</html> 

預先感謝您！

Answer 1

由於標識必須是唯一的你應該使用類和這個JavaScript：

function funcion(id) { 
    var tds = document.getElementsByClassName(id); 
    for (var i = 0; i < tds.length; i++) { 
     tds[i].style.backgroundColor = "red"; 
    } 
} 

jsFiddle example

HTML

<table id="theTable"> 
    <tr> 
     <td class="red">0 - some txt</td> 
     <td>1 - some txt</td> 
     <td>2 - some txt</td> 
    </tr> 
    <tr> 
     <td class="red">3 - some txt</td> 
     <td>4 - some txt</td> 
     <td>5 - some txt</td> 
    </tr> 
    <tr> 
     <td> 
      <button type="button" onclick="funcion('red')">Try it</button> 
     </td> 
    </tr> 
</table> 

Answer 2

我會建議使用類，ID是意思是獨特的，因此函數只返回第一次出現。

的代碼會是這個樣子：

<table id="theTable"> 
    <tr> 
     <td class="red">some text</td> 
     <td>some text</td> 
     <td>some text</td> 
    </tr> 
    <tr> 
     <td class="red">some text</td> 
     <td>some text</td> 
     <td>some text</td> 
    </tr> 
    <tr> 
     <td class="red">some text</td> 
     <td>some text</td> 
     <td>some text</td> 
    </tr> 
</table> 

和功能：

function makeThemRed() 
{ 
    var redElements = document.getElementsByClassName("red"); 

    for(var i = 0; i < redElements.length; i++) 
    { 
     redElements[i].style.backgroundColor = "red"; 
    } 
} 

，因爲你需要通過的結果，這是最好的一個循環完成迭代。