Question

我有以下代码：

<script type = "text/javascript">
function showColors() {

var cells = getElementsbyClass("design");
for (var i = 0, len = cells.length; i < len; ++i) {
    cells[i].style.backgroundColor = "#ddd";
}

}

if(document.getElementsByClassName) {

getElementsByClass = function(classList, node) {    
    return (node || document).getElementsByClassName(classList);
  };


 </script>

<script type = "text/javascript">
window.onload = function() {

showColors();

  }
 </script>
table id="foo">
<tbody>
    <tr class = "design">
        <td>One</td><td>Two</td><td>Three</td>
    </tr>
    <tr class = "design">
        <td>One</td><td>Two</td><td>Three</td>
    </tr>
    <tr class = "design">
        <td>One</td><td>Two</td><td>Three</td>
    </tr>
</tbody>
 </table>
</body>

我的问题：如何通过getElementsbyClass（）设置不同颜色的每一行。你怎么看，实际的代码不起作用:(。请不要使用JQuery或selectivizr。请留下示例:)。我需要一个动态的例子。我知道css会起作用!!!它也很重要：它适用于所有浏览器!!

非常感谢您的回答：）

Answer 1

使用CSS：

.design:nth-child(even){ background-color:#ddd }

Answer 2

如果循环所做的唯一事情就是更改背景颜色，每次只需添加2到i，而不是使用++增加它：

var cells = document.getElementsByClassName("design");
for (var i = 0, len = cells.length; i < len; i+=2) {
   cells[i].style.backgroundColor = "#ddd";
}

演示：http://jsfiddle.net/ytCZa/

如果循环需要为每一行做其他事情，那么在设置颜色之前，使用模运算符测试i是否可被2整除：

if (i % 2 === 0)
   cells[i].style.backgroundColor = "#ddd";

但请注意，您有一个拼写错误：您使用小写拼写getElementsbyClass函数＆＃34; b＆＃34;在调用它时使用大写＆＃34; b＆＃34;在定义时，由于JS区分大小写，因此无法正常工作。此外，if声明错过了结束}。

在上面的代码和演示中，我根本没有使用您的getElementsByClass功能：它没有执行getElementsByClassName不做的任何事情，而且取决于在getElementsByClassName上工作，所以你不需要它。如果您确实出于某种原因想要它，那么这是一个演示，我已修复代码以使其正常工作：http://jsfiddle.net/ytCZa/1/

Answer 3

希望这会对你有所帮助！

LE。这是更好的

<!DOCTYPE html>
<html>
<script type = "text/javascript">
    function showColors() {
        var cells = document.getElementsByClassName("design");
        for (var i = 0, len = cells.length; i < len; ++i) {
            if (i % 2 == 0)
            {
                cells[i].style.backgroundColor = "#ddd";
            }
            else
            {
                cells[i].style.backgroundColor = "#aaa";
            }
        }
    }
    if(document.getElementsByClassName) {
        getElementsByClass = function(classList, node) {    
            return (node || document).getElementsByClassName(classList);
        };
    };


window.onload = function(){
    showColors();
}
 </script>
<body>
    <table id="foo">
        <tbody>
            <tr class = "design">
                <td>One</td><td>Two</td><td>Three</td>
            </tr>
            <tr class = "design">
                <td>One</td><td>Two</td><td>Three</td>
            </tr>
            <tr class = "design">
                <td>One</td><td>Two</td><td>Three</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 4

为什么不提取tbody元素，遍历TR元素并添加更改类如下：

var i
  , current
  , rows = document.getElementById('table-body').getElementsByTagName('tr');

for(i = 0; i < rows.length; i++) {
  current = current !== 'class1' ? 'class1' : 'class2';
  rows[i].setAttribute('class', current);
}

你可以在js-fiddle看到一个有效的例子：http://jsfiddle.net/VF3Ay/3/

如何通过getElementsbyClass设置不同颜色的第二行

4 个答案: