изменение цвета Javascript

Question

Я пытаюсь

• Получить 2 колонки с MySQL и отображать их в HTML таблице
• При нажатии на имя, которое находится в заголовке таблицы я хочу, чтобы изменить цвет всех контактов ,

что я HV done- звоню в JavaScript на tableRows идентификатор, чтобы изменить цвет, но он только меняет цвет 1-го ряда.

<?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"; 
    } 

любая идея, почему это происходит, хотя все строки динамически созданы в то время как цикл, так что все Нч тот же идентификатор и, следовательно, правило CSS Сюд применять на них.

Или есть лучший способ сделать это ?? Я Нч использовать Javascript только

Answer 1

но только меняет цвет 1-го ряда.

Право. tableRowsid находится на строка и 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" 
}