顏色更改JavaScript

從MySQL檢索兩列，並在HTML表格中顯示出來
當名稱是在表頭點擊我想改變所有聯繫人的顏色。

我HV私下作出─ 呼喚上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"; 
    }

任何想法，爲什麼它的發生，儘管所有的行通過動態循環，同時使所有HV相同的ID，因此，CSS規則SUD適用於他們創造。

還是有更好的方式來做到這一點？我HV使用JavaScript只

來源

2013-07-05 Mayur

ID應該是唯一在DOM一個元素，如果你想選擇多個元素使用'class'和'document.getElementsByClassName' – redDevil

但它只是改變了第一排的顏色。

沒錯。 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" 
}

來源

2013-07-05 11:14:18

是。或者如果需要一個ID，創建唯一的ID（例如連接一個計數器）。 –

顏色更改JavaScript

回答

相關問題