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来改变＆＃34; First＆＃34;鼠标悬停或悬停时排成其他颜色。代码将被放入一个.js文件中，该文件将链接到HTML文件。

到目前为止，我已经这样做了：

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

    });

问题是，我只能在悬停时更改第一列，这是脚本编码要执行的操作。

我可以选择更改.CSS文件或.js文件。

如何在不更改HTML文件中的任何内容的情况下更改整行的颜色？

Answer 1

如果你可以使用CSS3，你可以参考＆＃34;第一个＆＃34;行（实际上是你的例子中的第二行）：nth-child（2）。所以你的悬停会像这样工作：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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函数。

谢谢你们给我一个良好的开端。

感谢所有帮助!!

Jquery改变表行颜色

2 个答案: