許多呈現表格數據的站點都使用交替的背景顏色來提高該數據的可讀性。當我開發一個網站時，我也意識到我也想這樣做。問題？在我的情況下，該表不是由服務器端應用程序或腳本生成的，您可以在網絡上找到許多示例。
明顯的解決方案是每第二行進行硬編碼，以確保其具有不同的背景顏色。但是我希望表具有動態性，以便可以在表的中間添加新行，而不會更改隨後的行的背景顏色屬性。
我的解決方案使用JavaScript，因為CSS3並不是真正的可行選擇。如今，瀏覽器仍在努力支持CSS1和CSS2。即使不建議使用HTML表用於網頁佈局，它們仍然非常適合表現出表格數據。在本教程中，我將根據同一想法介紹三個示例。我僅在Windows平台上測試了IE6，Firefox 1.0，Mozilla 1.7.3和Opera 7.54中的解決方案。入門
現在，我們需要檢查瀏覽器是否相當新，並且具有必要的JavaScript功能（即W3C DOM支持）。以下行執行此檢查，取消Netscape 4的資格以及該一代人的其他檢查資格。這樣的瀏覽器將不會嘗試為桌子著色。
<table > <br> <tr><td>0 - some txt</td></tr> <br> <tr><td>1 - some txt</td></tr> <br> <tr><td>2 - some txt</td></tr> <br> <tr><td>3 - some txt</td></tr> <br> <tr><td>4 - some txt</td></tr> <br> </table>
還要注意，所有這些示例共有的是此代碼：
if(document.getElementById)
這個第一個示例使用樣式元素，我們通過該元素為背景顏色定義了兩個類別：
var table = document.getElementById(id); <br>
var rows = table.getElementsByTagName("tr"); <br>
for(i = 0; i < rows.length; i++){ <br>
//manipulate rows <br>
...在這裡，Modulo操作員％為我們提供了剩餘的部門。
<style> <br>
.odd{background-color: white;} <br>
.even{background-color: gray;} <br>
</style>應從車身標籤的on load事件中調用上述功能： 結果可能看起來像這樣： >讓我們繼續下一個示例 - 有些冒險。我不需要使用兩種交替的顏色，而是想使用幾種。讓我們添加一個容納所有這些顏色的陣列。 >由於有限數量的顏色在HTML中具有定義的名稱，因此我們將切換到十六進制值。所得顏色將由三個值組成：紅色，綠色和藍色。當所有三種顏色最大打開時：#ffffff時，都會實現白色。相反的黑色為＃000000。 >行操作代碼將僅包含一行，但是我們將無需複制和粘貼相同的代碼，而是進行一個單獨的函數調用： >在上面的片段中可以看到，可以為行設置CSS類名稱或HTML標籤的特定屬性： 示例2的結果可能如下所示： >示例3
>
當您需要將數字轉換為十進制（在這種情況下）時，
>使用CSS和JavaScript，在不必從服務器應用程序中重新生成HTML頁面，添加或增加代碼的可讀性相當容易。正如我們在這裡看到的，也可以在靜態HTML頁面上添加。要查看這些示例中的這些示例，請下載包含代碼的HTML文件。 更改表中特定行的背景顏色，您可以使用JavaScript方法GetElementById或QuerySelector選擇該行，然後更改其樣式屬性。 Here’s an example: var row = document.querySelectorAll（“。myrows”）; >我可以根據其內容更改行的背景顏色嗎？您可以使用InnerHTML屬性獲取行的內容，然後使用IF語句根據內容更改背景顏色。以下是一個示例： > >我可以將行的背景顏色更改為原始顏色嗎？在更改它之前，您可以將原始顏色存儲在變量中，然後使用此變量更改顏色。以下是一個示例： > >當我選擇它時如何更改行的背景顏色？ var row = document.getElementById（“ myrow”）;<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
<tr><td>2 - some txt</td></tr> <br>
<tr><td>3 - some txt</td></tr> <br>
<tr><td>4 - some txt</td></tr> <br>
</table>
>示例2
if(document.getElementById)
var table = document.getElementById(id); <br>
var rows = table.getElementsByTagName("tr"); <br>
for(i = 0; i < rows.length; i++){ <br>
//manipulate rows <br>
...<style> <br>
.odd{background-color: white;} <br>
.even{background-color: gray;} <br>
</style>
首先，我們需要設置一些變量：
function alternate(id){ <br>
if(document.getElementsByTagName){ <br>
var table = document.getElementById(id); <br>
var rows = table.getElementsByTagName("tr"); <br>
for(i = 0; i < rows.length; i++){ <br>
//manipulate rows <br>
if(i % 2 == 0){ <br>
rows[i].className = "even"; <br>
}else{ <br>
rows[i].className = "odd"; <br>
} <br>
} <br>
} <br>
}<html> <br>
... <br>
<body onload="alternate('thetable')"> <br>
<table > <br>
<tr><td>...</td></tr> <br>
</table> <br>
...<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
<tr><td>2 - some txt</td></tr> <br>
<tr><td>3 - some txt</td></tr> <br>
<tr><td>4 - some txt</td></tr> <br>
</table>
結論
經常詢問的問題（常見問題解答）關於JavaScript中的背景顏色的更改
>
>如何使用JavaScript在表中使用特定行的背景顏色？
document.getElementById("myRow").style.backgroundColor = "red";
// or
document.querySelector("#myRow").style.backgroundColor = "red";
In this example, “myRow” is the id of the row you want to change.您可以用任何有效的顏色名稱或顏色代碼替換“紅色”。 >我可以一次更改多行的背景顏色嗎？您可以使用QuerySelectorall方法選擇要更改的所有行，然後使用循環更改每行的背景顏色。以下是一個示例：
for（var i = 0; i
>當我單擊它時如何更改行的背景顏色？
>
在單擊時更改行的背景顏色，可以在JavaScript中使用onClick事件。以下是一個示例： document.getElementById（“ myrow”）。您可以用任何有效的顏色名稱或顏色代碼替換“綠色”。
>>當我懸停在它上時，我該如何更改行的背景顏色？
在懸停在懸停的情況下，可以更改行的背景顏色，可以使用：懸停偽級級別的CSS中。以下是一個示例：
#myrow：hover {
背景色：pink;在此示例中，“ myrow”是您想要更改的行的ID。您可以用任何有效的顏色名稱或顏色代碼替換“粉紅色”。
var row = document.getElementById（“ myrow”）;
var OriginalColor = row.style.style.style.backgroundColor;
>我如何更改每隔幾秒鐘的一行的背景顏色？
以每隔幾秒鐘更改行的背景顏色，您可以在JavaScript中使用setInterval函數。這是一個示例：setInterval（function（function（）{
row.style.style.backgroundcolor = getRandomColor（getRandomColor（）返回隨機顏色。數字2000是毫秒的間隔（2000毫秒= 2秒）。
>我可以根據條件更改行的背景顏色嗎？
是的，您可以根據條件使用JavaScript更改行的背景顏色。您可以使用if語句檢查條件，然後如果條件為真，然後更改背景顏色。 Here’s an example:
var row = document.getElementById("myRow");
if (someCondition) {
row.style.backgroundColor = "orange";In this example, “myRow” is the id of the row you want to change, and someCondition is the condition you want to check.您可以用任何有效的顏色名稱或顏色代碼替換“橙色”。
>
在選擇行時，可以更改行的背景顏色，可以在JavaScript中使用OnSelect事件。但是，此事件通常不用於表行，因為它通常用於文本輸入字段。一種更常見的方法是在您單擊行時更改背景顏色，如問題3所述。>我可以在特定列中更改行的背景顏色嗎？您可以使用CellIndex屬性獲取列的索引，然後如果索引與特定列匹配，則更改行的背景顏色。以下是一個示例：
if（row.cells [0] .cellindex == precsecteclumn）{
row.style.style.backgroundcolor =“ teal”;特定列的索引。您可以用任何有效的顏色名稱或顏色代碼替換“藍綠色”。
以上是使用JavaScript Alter Table Row背景顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！
