在函数中循环以改变颜色表格行

我有一个建立在PHP中的查询构建表单。查询的结果将返回并放置在两个不同的表格中。（表格ID是结果和结果2）每个返回的记录都会生成两个表格来显示其数据。（即将为三个）在函数中循环以改变颜色表格行

我使用下面的代码来改变我<tr>的的类标记，以提供备用行着色：

<script type="text/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 = "row-one"; 
     }else{ 
     rows[i].className = "row-two"; 
      } 
      } 
     } 
     } 
</script>

然后我使用的主体的onload像这样：

<body onload="alternate('results'); alternate('results2');">

问题是，它只是颜色这些表的前两个情况下，根据记录的金额时返回有可能是数百人。

我怎样才能得到这个函数适用于文档中的每个表，id = results和results2，并很快成为result3？

来源

2010-01-13 Aaron

为什么不在PHP建立页面时这样做，而不是在文档已经传递到浏览器之后呢？另外，请注意，在HTML元素ID中应该是唯一的 - 这就是为什么它仅适用于每个ID的第一个实例。 – Nicole 2010-01-13 18:48:19

当你说“它只着色这些表格的前两个实例”时，你的意思是只有每个表格的前两行是有颜色的？或者只有前两个表的所有行都有颜色？ – Benry 2010-01-13 18:55:09

好吧，让我去看看我是否可以找到一个PHP为我做这个例子。谢谢Renesis的建议。 – Aaron 2010-01-13 18:55:51

如果你真的想用JavaScript来做到这一点，我建议如下代码：

首先，让你的表有一类的“结果”，而不是ID“结果1”，“结果2”中，等等（因为我对这个问题的评论说，ID必须是唯一的，的getElementById将只返回一个结果，并且只适用于一个真实的元素）：

<table class="results">...</table>

接下来，使用这个JavaScript：

<script type="text/javascript"> 
function alternate(classNameMatch) { 
    var tables = document.getElementsByTagName("TABLE"); 
    for (var i=0; i < tables.length; i++) { 
     var table = tables[i]; 
     if (table.className.indexOf(classNameMatch) == -1)) continue; 

     for (var j=0; j < table.rows.length; j++) { // "TABLE" elements have a "rows" collection built-in 
      table.rows[j].className = j % 2 == 0 ? "row-one" : "row-two"; 
     } 
    } 
} 
</script>

然后在页面加载时致电alternate("results");。

但是，我真的建议在PHP中这样做。对于较大的结果集，JavaScript将是非常有效的。它也不会立即显示，使得页面样式在页面加载后可见。

我也想补充一类每隔一行，然后风格的所有行默认的一种方式和其他类的其他方式：

<style type="text/css"> 
table.results tr { background-color:#f0f0f0; } 
table.results tr.row2 { background-color:#f0f0ff; } 
</style>

来源

2010-01-13 19:03:56 Nicole

谢谢Renesis，非常感谢。 – Aaron 2010-01-13 19:07:01

如果我想要一列红色，两列蓝色，一列红色，两列蓝色等等，该怎么办？你能帮我解决这个问题吗？ – Ionut 2016-09-23 13:46:45

当然每次调用该方法只适用到一个表格 - 您没有循环使用多个表格，而是将table var设置在文档的顶部，然后对表中的行着色为表格。正如其他人指出的那样，无论如何，ID在文档中都是唯一的，这就是为什么getElementByID只返回单个值。

这样做在服务器端将很多更好，因为这是发送给每个人的规范文档，所以不依赖于他们有JS启用，并且不采取可能不可忽略的金额处理时间，而页面被分割。

如果必须做客户端，更好地实施将是给你的表特定类（而不是ID）;稍微重构您的解决方案，以便将功能的核心分割成一个方法，该方法对传入的单个表进行分条;然后找到所有带有“stripeme”（或其他）的表，然后遍历该结果，将每个表传递给您的分条方法。

来源

2010-01-13 19:05:30

在函数中循环以改变颜色表格行

回答

相关问题