颜色改变Javascript

Question

我正在尝试

• 从 MySQL 中检索 2 列并在 HTML 表中显示它们
• 点击表格标题中的名称时，我想更改所有联系人的颜色。

我做了什么- 在tableRows id 上调用 javascript 来改变颜色，但它只会改变第一行的颜色。

<?php
  while($row_color_test = mysql_fetch_assoc($result_color_test))
  {
    ?>
      <tr id="tableRows">
        <td><?php echo $row_color_test['name'] ; ?></td>
        <td><?php echo $row_color_test['phone']; ?></td>
      </tr>
    <?php 
  }
    ?>

Javascript 函数

function changecolor()
    {
     document.getElementById("tableRows").style.color="red";
    }

知道为什么会发生这种情况，尽管所有行都是由 while 循环动态创建的，因此所有行都具有相同的 id，因此 CSS 规则适用于它们。

或者有更好的方法吗？我只使用 Javascript

Answer 1

但它只会改变第一行的颜色。

没错。 tableRows id 在行上，id 值必须在页面上是唯一的。您不能拥有多个具有相同id 的元素（在本例中为行）。如果这样做，大多数浏览器只会忽略页面上后续元素上的 id - 因此您只会看到一个元素更新。

您可以改用class：

<tr class="tableRows" ...

...然后这样做on most browsers:

var list = document.querySelectorAll(".tableRows");
var index;
for (index = 0; index < list.length; ++index) {
    ilst[index].style.color = "red";
}

但最好还是在表格上设置一个类并使用 CSS 规则将行变为红色。

document.getElementById("id_of_the_table").className += " foo";

...使用这个 CSS：

.foo tr {
    color: "red"
}