jQuery的改變表格行顏色

Question

我給出這樣一個表結構此HTML文件：

<table width="707" border="0"> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td class="code"> First </td> 
    <td> 1 </td> 
    <td> 2 </td> 
    </tr> 
    <tr> 
    <td class="code"> Second </td> 
    <td> 1 </td> 
    <td> 2 </td> 
    </tr> 
    <tr> 
    <td class="code"> Third </td> 
    <td> 1 </td> 
    <td> 2 </td> 
    </tr> 

我並不想改變這個HTML文件什麼。

我要使用jquery在鼠標懸停或懸停時將「第一」行更改爲其他顏色。代碼將被放置到一個.js文件中，該文件將鏈接到HTML文件。

到目前爲止，我已經做到了這一點：

$(".code").hover(function() { 
$(this).css("background-color", "#333"); 
}, function() { 
    $(this).css("background-color", ""); 

    }); 

的問題是，我只能改變第一欄時我懸停，這是什麼腳本編碼做。

我可以選擇更改.CSS文件或.js文件。

如何更改整行的顏色而不更改HTML文件中的任何內容？

Answer 1

如果您可以使用CSS3，則可以使用：nth-​​child（2）引用「第一個」行（實際上是您示例中的第二行）。所以，你的懸停會像這樣工作：

tr:nth-child(2):hover {background:#333;}

<table width="707" border="0"> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="code"> First </td> 
 
    <td> 1 </td> 
 
    <td> 2 </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="code"> Second </td> 
 
    <td> 1 </td> 
 
    <td> 2 </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="code"> Third </td> 
 
    <td> 1 </td> 
 
    <td> 2 </td> 
 
    </tr> 
 
</table>

Answer 2

謝謝你們。

隨着我得到的答案，我修改了一點點。

在.CSS文件，我添加：

tr:nth-child(first){ 
background-color:#4186BE 
} 
tr:nth-child(odd){ 
background-color:#009BE6 
} 
tr:nth-child(even){ 
background-color:#F96 
} 

在js文件，我使用dwreck08給出的代碼：

$(".code").hover(function() { 
$(this).parent('tr').css("background-color", "#333"); 
}, function() { 
$(this).parent('tr').css("background-color", ""); 
}); 

在那裏，我在交替的行顏色。當鼠標懸停在具有類代碼的行上時，行和列將在.hover函數下改變顏色。

謝謝你給我一個良好的開端。

感謝所有的幫助！