Question

我目前有一个替代表格行颜色，其中包含以下javascript代码：

function alternate(id){     
    if(document.getElementsByTagName){  
        var table = document.getElementById(id);   
        var rows = table.getElementsByTagName("tr");    
        for(i = 0; i < rows.length; i++){           
            if(i % 2 ==0 ){ 
                rows[i].className = "odd0"; 
            }else { 
                rows[i].className = "even2"; 
            }
        }
    }
} // end function

我想在此处添加，是为了满足以下任一条件：

如果表格行中存在Div id“arrow”，则将类名称设为“odd0”
如果表格行中存在Div id“arrow”，则使类名与其上方的行颜色相同。

我的第一次尝试是在div id“arrow”存在的情况下尝试使类名为“odd0”;但是，它只是破坏了我的代码或者没有阅读它。

我尝试了以下方法，将其置于自己的函数中或将其插入for循环中......

 if (document.getElementById("arrow")) {
  rows[i].className = "odd0";
 }

非常感谢任何帮助！

Answer 1

只是为了让你知道你应该只使用一个设置为'arrow'的id，假设是这样：

 var arrow = document.getElementById('arrow');
 var row = arrow.parent;
 row.setAttribute('class', 'odd0');

此代码获取箭头div的父级，并将其类别设置为“odd0”。使用jQuery，您可以这样做：

 $('#arrow').parent().addClass('odd0');

如果您有多个带有ID的div：'arrow'，那么您需要更改它们以改为使用类箭头，代码将类似于：

 var arrows = document.getElementsByClassName('arrow');
 for(var i = 0; i < arrows.length; i++) {
     arrows.parent.setAttribute('class', 'odd0');
 }

或者再次使用jQuery

 $('.arrow').parent().addClass('odd0');

Answer 2

你的问题有点模糊，你的要求似乎是矛盾的。但是，我认为你想要的是你的行在odd0和even2之间交替，除非你的行中有arrow。然后你希望当前行与它上面的行具有相同的类。

如果我错了，请纠正我。

因为你把jQuery作为标记，我会给你一个jQuery答案。如果您不了解jQuery，我建议您学习它。它使得这种类/ css操作很多比直接JavaScript更容易，并为您处理所有跨浏览器问题。

function alternate(id) {
    var i = 1;
    // Go through each row
    $('#'+id).find('tr').each(function() {
        // If this isn't an "arrow" row, increment the count
        if ($(this).find('.arrow').length < 1) {
            i++;
        }
        // Decide whether the row is odd or even
        if (i % 2 == 0) {
            $(this).addClass('even2');
        } else {    
            $(this).addClass('odd0');
        }
    });
}

演示：http://jsfiddle.net/jtbowden/uBgYH/1/

如果存在div id“arrow”，则使其表行具有类“odd0”

2 个答案: