Javascript 高亮显示/取消高亮显示列中的一行

目前我有一个非常基本的表格：

我需要能够在每列中只高亮显示一行，并取消选择之前选择的内容

我知道我需要一个CSS类，例如

 .hightlighted {
 background: #f00;
 color: #fff;
 }  

视图中的HTML也非常基本：

<tbody>
<tr>
<td> </td>
<td>Differdange</td>
<td> </td>
</tr>       
    <tr>
<td> </td>
<td>Dippach</td>
<td> </td>
    </tr>
<tr>
<td> </td>
<td>Dudelange</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Echternach</td>
<td></td>
</tr>
<tr>
<td> </td>
<td>Erpelscheid</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Esch-sur-Alzette</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Esch-sur-Sûre</td>
<td> </td>
</tr>
    <tr>
<td> </td>
<td>Ettelbruck</td>
<td> </td>
</tr>
    <tr>
<td> </td>
<td>Feulen</td>
<td> </td>
</tr>
</tbody

---

要这样做的代码？谢谢。。。。。。。。。。。。。。。。。。。。。。。。。。。。

嗨，现在你可以这样做jquery了

Css

    .hightlighted{
 background: #f00;
 color: #fff;
 } 

jquery

$("tr").click(function(){

    $("tr").removeClass('hightlighted')
         $(this).addClass('hightlighted');


});

---

您可以使用

.removeClass（）

和

.addClass（）

jQuery方法来实现这一点。这里有一个小演示：。代码可以自我解释，但下面是JavaScript部分的注释版本：

var chosen = []; //an array to save the chosen row for each column
$("td").click(function() { //when a td is clicked
    var idx = $(this).index() + 1; //get column of current cell
    $("td:nth-child(" + idx + ")").removeClass("highlighted"); //unhighlight all cells in column
    $(this).addClass("highlighted"); //highlight this one
    chosen[idx] = $(this).parent("tr").index(); //and save it as chosen in its column
});

---

你能更准确地说明选择的时间和方式吗？我猜您希望用户单击一行，然后突出显示该行。在这种情况下，您可能希望在css中创建一个highlight类，将其添加到用户单击的行中，然后您可以在其类中获得该行：

tr.highlighted td {
    background: #f0;
    color: #fff;
}

在javascript中：

// catch click event
$('tr').click(function (e) {
    // remove prvious selection
    $('tr.highlighted').removeClass('highlighted');
    // make this row selected
    $(e.currentTarget).addClass('highlighted');
});

// get current selection
function getSelected () {
    return $('tr.highlighted');
}

// catch click event
$('tr').click(function (e) {
    // remove prvious selection
    $('tr.highlighted').removeClass('highlighted');
    // make this row selected
    $(e.currentTarget).addClass('highlighted');
});

// get current selection
function getSelected () {
    return $('tr.highlighted');
}