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

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

................................ 演示

嗨，现在您可以像这样执行此 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');
}