使表格行可選

我想讓鼠標懸停在它們上面時，表格的行具有高亮顏色，我希望整行可以選擇。我曾嘗試：使表格行可選

<tr onmouseover="ChangeColor(this, true);" 
       onmouseout="ChangeColor(this, false);" 
       onclick="DoNav('http://www.yahoo.com/');">

但問題是，我有，如果他們都在我的CSS樣式表中指定的色彩，色彩這些個別行和JavaScript代碼來改變顏色沒有效果的外部CSS樣式表。所以例如，我希望行通常是綠色的，並且在盤旋和點擊時突出顯示白色。如果我將顏色指定爲綠色，那麼即使將鼠標懸停在它們上面，它也始終是綠色的。如果我沒有指定爲綠色的顏色，那麼JavaScript的作品。這很煩人。而且我也有交替行的顏色。

任何人都可以幫助我一個簡單的解決方案嗎？

這裏我使用了onmousehover和onmouseclick JavaScript函數：

function ChangeColor(tableRow, highLight) 
{ 
    if (highLight) 
    { 
     tableRow.style.backgroundColor = '#89ae37'; 
    } 
    else if (this.class == alt) 
    { 
     tableRow.style.backgroundColor = '#EAF2D3'; 
    } 
    else 
    { 
     tableRow.style.backgroundColor = '#A7C942'; 
    } 
} 

function DoNav(theUrl) 
{ 
    document.location.href = theUrl; 
}

來源

2012-02-20 Asher Garland

第一個'else'線應該是：'其他{如果（this.className == 'ALT'）'...} – Teemu 2012-02-20 20:47:06

你可以做懸停效果沒有JS在所有如果你把類似下面的到你樣式表：

tr:nth-child(odd) { background-color : #EAF2D3; } 
tr:nth-child(even) { background-color : #A7C942; } 
tr:hover { background-color : #89ae37; }

演示：http://jsfiddle.net/nnnnnn/zHgsf/

注意，你甚至不需要指定class="alt"，因爲:nth-child(odd)和:nth-child(even)選擇器會幫您處理。

來源

2012-02-20 20:38:51 nnnnnn

這種行爲似乎是造型的應用程序，而不是提供任何邏輯，慘叫一聲我被放置到樣式表中，而不是JavaScript。

取得一個表的高亮，你的例子匹配，一整排的CSS：

table tr { 
    background: #a7c942; 
} 
table tr:hover { 
    background: #89ae37; 
} 
table tr.alt:hover { 
    background: #eaf2d3; 
}

來源

2012-02-20 20:36:08 Greg

你可以很容易地通過添加和刪除一個css類來做到這一點，jss可以做的不僅僅是背景顏色。這裏是我爲你做的一個例子，它改變了鼠標懸停的背景。

http://jsfiddle.net/zHr4n/8/

來源

2012-02-20 20:39:26 OnResolve

使表格行可選

回答

相關問題