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

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

javascript html jsp

Javascript 如何通过getElementsbyClass设置不同颜色的第二行,javascript,html,jsp,Javascript,Html,Jsp,我有以下代码： <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.getElementsByClas

我有以下代码：

<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>


函数showColors（）{
变量单元格=getElementsbyClass（“设计”）；
对于（变量i=0，len=cells.length；i




window.onload=函数（）{
showColors（）；
}
表id=“foo”>
一二三
一二三
一二三

我的问题：如何通过getElementsbyClass（）设置每2行的不同颜色。您可以看到，实际代码不起作用：（.请不要使用JQuery或selectivizr。请继续使用示例：）。我需要一个动态示例。我知道css可以工作！！！同样重要的是：它应该适用于所有浏览器
非常感谢您的回答：）
使用CSS：
.design:nth-child(even){ background-color:#ddd }

如果循环所做的唯一事情就是更改背景颜色，那么每次只需在i
中添加2，而不是用++
增加它：
var cells = document.getElementsByClassName("design");
for (var i = 0, len = cells.length; i < len; i+=2) {
   cells[i].style.backgroundColor = "#ddd";
}

但请注意，您有一个输入错误：调用函数时，您将getElementsbyClass
函数拼写为小写的“b”，但在定义函数时，拼写为大写的“b”，这不起作用，因为JS区分大小写。另外，如果if
语句缺少其结束符}

在上面的代码和演示中，我根本没有使用您的getElementsByClass
函数：它不做getElementsByClassName
不做的任何事情，它依赖于getElementsByClassName
来工作，所以您不需要它。如果出于某种原因您真的想要它，下面是一个演示，我在其中修改了代码以使其正常工作：
希望这对您有所帮助
乐。这样更好
<!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>


函数showColors（）{
var cells=document.getElementsByClassName（“设计”）；
对于（变量i=0，len=cells.length；i
为什么不获取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);
}

vari
现在的
，rows=document.getElementById（'table-body'）.getElementsByTagName（'tr'）；
对于（i=0；i


您可以在jsfiddle上看到一个工作示例：
您只需使用CSS3就可以实现这一点。检查无CSS。我需要一个类的动态示例@user1860908:我很确定，无论你添加多少行，这都会起作用。我需要IE8！！！代码应该适用于所有浏览器。tr:nth child（2n）{background color:#c0c0；}是我的第一种方法，但这只适用于ie9。不幸的是，这个命令。style.backgroundColor不适用于IE8:（…你可以尝试使用document.querySelectorAll（“.design”）。对于ie9和Firefox，它工作得很好。但我必须确定它不适用于IE8：（IE8是否有引用实际代码的颜色声明？！IE8没有GetElementsByCassName（）
。请改用document.querySelectorAll（.design”）
，或者如果您想在不更改现有代码的情况下支持更旧的IE，请使用颜色声明。GetElementsByCassName（）适用于IE8！！！我将其用于另一个用例！我不想使用任何脚本！！Javascript应该是唯一的一个！颜色语句.style.backgroundColor是原因，为什么代码不适用于IE8getElementsByClassName（）
不适用于IE8根据，如果你谷歌“getElementsByClassName IE8”你可以看到任何数量的其他页面来证实这一点。style.backgroundColor
在IE比v8早得多的时候就已经工作了。你在JS控制台（通过F12打开）中遇到了什么错误？请尝试document.querySelectorAll（.design”）相反，看看会发生什么-你不需要任何外部脚本。但是这种方法可能是在所有浏览器中都可以使用的解决方案！它在IE8中工作并且应该工作：“var i，current，…”在那里变量被初始化。你必须复制整个代码！！！变量current有哪个值？循环第一次到达时ed current为空，但设置为内部（current！=='class1'…）再次尝试复制我的代码，我在setAttribute中输入了一个错误并更正了它。请查看更新的fiddle。您可以将类的名称（在我的示例中是class1和class2）更改为您喜欢的名称。在css中定义该类的背景色（请参阅fiddle！）最后；-）只是第一次检查dom，看到attr类名，并没有考虑太多；-）
<!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>

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