Question

我有一个用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将此函数应用于文档中的每个表，并很快成为结果3？

Answer 1

如果您确实希望使用JavaScript执行此操作，我建议使用以下代码：

首先，让你的表有一类“结果”而不是ID“results1”，“results2”等（因为我对问题的评论说，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>

Answer 2

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

在服务器端执行此操作也会更好，因为这是发送给每个人的规范文档，所以不依赖于他们启用了JS，并且不需要页面被条带化时的处理时间不可忽略。

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

在函数内循环以替换颜色表行

2 个答案: