0

我有以下代码：

<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会工作！！！同样重要的是：它应该适用于所有浏览器！！

非常感谢您的回答:)

4

4 回答 4

0

使用 CSS：

.design:nth-child(even){ background-color:#ddd }
于 2012-11-29T22:08:05.010 回答
0

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

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在调用函数时用小写“b”拼写了函数，但在定义它时用大写“b”拼写，这不起作用，因为 JS 区分大小写。该if声明也缺少结束语}。

在上面的代码和演示中，我根本没有使用你的getElementsByClass函数：它不做任何不做的事情getElementsByClassName，它依赖于getElementsByClassName工作，所以你不需要它。如果出于某种原因你真的想要它，这里有一个演示，我已经修复了代码以使其工作：http: //jsfiddle.net/ytCZa/1/

于 2012-11-29T22:14:32.207 回答
0

希望这对你有帮助！

乐。这个更好

<!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>
于 2012-11-29T22:18:31.573 回答
0

为什么不获取 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);
}

​</p>

您可以在 js-fiddle 看到一个工作示例：http: //jsfiddle.net/VF3Ay/3/

于 2012-11-29T22:26:52.090 回答