Question

I have a pretty basic table at the moment:

I need to be able to only hightlight one row in each column, and deselect whatever was selected before it..

I understand I’m going to need a CSS class, e.g.

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

The HTML in the view is pretty basic also:

<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

But I don’t know whether it’s appropriate to highlight/unhighlight rows in CSS if I am going to be needing to ‘grab’ the selected data from the rows when the table is completed by the user?

Can anyone suggest what I should use (JQuery, Javascript, CSS) to highlight a row in a column so that I can get the data later?

EDIT

Now I’ve got the highlighting sorted, the only problem I’m having is differentiating between columns so that instead of this (which I’m getting atm)

I want each columns to be able to have it’s own unique row highlighted (e.g. Differdange could be highlighted, as well as dddd on Localities)

Any way to edit the

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

code to do this? Thanks

Answer 1

You can use the .removeClass() and .addClass() jQuery methods to achieve this. Here’s a little demo: little link. The code is pretty self-explaining, but here’s a commented version of the JavaScript part:

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