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"; 
    } 
} 

，因为你需要通过的结果，这是最好的一个循环完成迭代。