1

我目前有以下 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“箭头”，则将类名设为“odd0”

  • 如果表格行中存在 Div id“箭头”，则使类名与其上方的行颜色相同。

我的第一次尝试是如果 div id “arrow”存在，则尝试将类名设为“odd0”；但是，它只是破坏了我的代码或不阅读它。

我尝试了以下操作，要么将其制成自己的函数，要么将其插入到 for 循环中......

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

任何帮助深表感谢！

4

2 回答 2

2

只是为了让您知道您应该只使用一个设置为“箭头”的 id，假设是这样：

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

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

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

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

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

或者，使用 jQuery

 $('.arrow').parent().addClass('odd0');
于 2012-04-10T17:52:42.907 回答
1

你的问题有点含糊，你的要求似乎矛盾。但是，我认为你想要的是让你的行在 and 之间交替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/

于 2012-04-10T17:52:05.730 回答