突出显示/取消突出显示列中的一行

Question

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

我需要能够只在每列中高亮一行，并取消选择之前选择的任何行。

我知道我需要一个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

但我不知道在用户完成表格时我是否需要从行中“抓取”所选数据时，是否适合突出显示/取消高亮显示CSS中的行？

有人可以建议我应该使用什么（JQuery，Javascript，CSS）来突出显示列中的行，以便我以后可以获取数据吗？

修改

现在我已经对突出显示进行了排序，我遇到的唯一问题是区分列，而不是这个（我正在获取atm）

我希望每个列能够突出显示它自己的唯一行（例如，可以突出显示Differdange，以及在Localities上显示dddd）

任何编辑

的方法

$("tr").click(function() {
$("tr").removeClass("highlighted");
$(this).addClass("highlighted");
});

这样做的代码？感谢

Answer 1

您可以使用.removeClass()和.addClass() jQuery方法来实现此目的。这是一个小小的演示：little link。代码非常自我解释，但这里是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
});

Answer 2

............................ 的 Demo

嗨，现在你可以像这样做这个jquery

<强>的CSS

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

<强> jquery的

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

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


});

Answer 3

您是否可以更准确地确定何时以及如何进行选择？我猜你想让用户点击一行，然后突出显示。在这种情况下，您想要在css中创建一个高亮类，将其添加到用户单击的行中，然后您可以获得行cia的类：

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');
}