javascript - 表格行悬停，背景更改和单击，但行中的某些子单元格具有不同的属性

Question

<table> 
<tr> 
<th>#</th> 
<th>Name</th> 
<th>Surname</th>
</tr> 

<tr onmouseover="ChangeColor(this, true);" 
onmouseout="ChangeColor(this, false);" 
onclick="DoNav('go.html');"> 

<td>1</td>
<td>John/td>
<td>Dump</td>
</tr> 
</table>

Javascript：

 function ChangeColor(tableRow, highLight)
        {if (highLight)
        {tableRow.style.backgroundColor = '#F5FFDB';}
        else
        {tableRow.style.backgroundColor = '';}}
 function DoNav(theUrl)
        {document.location.href = theUrl;}

我使用以下结构来绘制表格。当我将鼠标悬停在一行上时，它会更改背景，并且在我单击该行的任何地方它都会跳转到 url。我想要做的是有一些 id 标识符（可能进入<td>），它基本上告诉一行中的某些列表现不同。也就是说，这就是我正在寻找的：

<table> 
<tr> 
<th>#</th> 
<th>Name</th> 
<th>Surname</th>
</tr>   
<tr> 
<td id="hover_go_style_1">1</td>
<td id="hover_go_style_1">John</td>
<td id="hover_go_style_2">Dump</td>
</tr> 
</table>

有任何想法吗？

编辑：
我忘了提... id="hover_go_style_1" 会带我到一个网址，而 id="hover_go_style_2" 会带我到另一个网址。这就是“区别”。就像现在使用 onClick 一样，整行将我带到一个 url，但本质上我试图隔离单元格。不知道如何更好地解释这一点。

Answer 1

您应该使用 CSS 作为悬停颜色，那里更简单。您的点击事件也可以更好地连接并完全在您的 JavaScript 中处理。我在data-url您的行中添加了一个（HTML5 兼容的）属性来定义 URL。

jsFiddle

HTML

<table> 
<tr> 
<th>#</th> 
<th>Name</th> 
<th>Surname</th>
</tr>   
<tr data-url="go.html"> 
<td>1</td>
<td>John</td>
<td>Dump</td>
</tr> 
</table>

JS

$('tr[data-url]').click(function () {
    window.location.href = $(this).attr('data-url');
});

CSS

tr:hover td {
    background-color:#F5FFDB;
}

/* Style the third column differently */
tr:hover td:nth-child(3) {
    background-color:#F00;
}