JQuery selects selected columns only in table

Question

I see this post in highlighting even the columns , but can I highlight only the selected columns?

Here is the code they use:

$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue"); 

But I would like to: NOTE: class="highlight" will be in the selected columns, so if I select column 3, class="highlight" will be removed from column 2 and added to column 3. jQuery you need to add a class based on the selected column .

 <table class="tbl"> <tr> <th class="firstColumn"> Cell 1:Heading </th> <th class="highlight"> Selected column so this should be highlighted </th> <th> Cell 3:Heading </th> <th> Cell 4:Heading </th> <th> Cell 5:Heading </th> </tr> <tr> <td> Cell 1:Row 1 </td> <td class="highlight"> Selected column so this should be highlighted </td> <td> Cell 3:Row 1 </td> <td> Cell 4:Row 1 </td> <td> Cell 5:Row 1 </td> </tr> <tr> <td> Cell 1:Row 2 </td> <td class="highlight"> Selected column so this should be highlighted </td> <td> Cell 3:Row 2 </td> <td> Cell 4:Row 2 </td> <td> Cell 5:Row 2 </td> </tr> </table> 

Answer 1

For this, you can take a look at the jQuery tableHover plugin . Then use something like this

 $('table.tbl').tableHover({ colClass: 'hover', clickClass: 'click', headCols: true, footCols: true }); 

EDIT:

Something like that?

Working demo . Click on any cell to select a column.

Code from the demo -

 $(function() { var rows = $('table.tbl tr'); rows.children().click(function() { rows.children().removeClass('highlight'); var index = $(this).prevAll().length; rows.find(':nth-child(' + (index + 1) + ')').addClass('highlight'); }); }); 

Answer 2

Do you think using groups instead of adding classes to each cell?

i just recently started to see the power of groups of colgroups, and they work as follows:

 .highlight { background-color: yellow; } 

  <table id="myTable"> <colgroup class="highlight"></colgroup> <colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup> <thead> <tr> <th>header1</th> <th>header2</th> <th>header3</th> <th>header4</th> <th>header5</th> </tr> </thead> <tbody> <tr> <td>cell a</td> <td>cell b</td> <td>cell c</td> <td>cell d</td> <td>cell e</td> </tr> <tbody> <table> 

this will display a table with 5 columns, where 1 column has the css class to highlight the first column. so this is actually the only thing you need to do, add a function to hang each cell, just to add the highlight class to the corresponding group.

There is a full video game that you can find here: patch table title and column + highlighting.

* CHANGED the answer because it was inappropriate, I misunderstood the question and answered a completely different question. (correct answer added now)

Answer 3

Here is what I use to add transverse hair to the table:

 $('tbody td').hover(function() { $(this).closest('tr').find('td,th').addClass('highlight'); var col = $(this).index()+1; $(this).closest('table').find('tr :nth-child('+col+')').addClass('highlight'); }, function() { $(this).closest('tr').find('td,th').removeClass('highlight'); var col = $(this).index()+1; $(this).closest('table').find('tr :nth-child('+col+')').removeClass('highlight'); }); 

It seems that on large tables it works a little slower (backlighting is lagging).

Answer 4

If you create a link in the table headers, you can do something like this:

 $("table.tbl th a").click(function() { var colnum = $(this).closest("th").prevAll("th").length; $(this).closest("table").find("tr td").removeClass("highlight"); $(this).closest("table").find("tr td:eq(" + colnum + ")").addClass("highlight"); } 

This will cause all cells under the clicked link to be highlighted by the "highlight" class.

Of course, you should set the correct style in your CSS file:

 table.tbl tr .highlight { background-color: blue; } 

Answer 5

If you want to support colspan and rowspan , you first need to create a table cell index, i.e. a matrix that identifies the positioning of a cell in each row, regardless of layout. Then you need to track the events of all the table cells of interest and calculate their offset in the matrix and columns that separate the vertical index.

The resulting search is illustrated in the following animation:

I wrote a plugin that fires wholly.mouseenter and wholly.mouseleave for columns. Wholly .

Answer 6

You can use a fully connected plugin. You can read the full tutorial on how to integrate it here http://voidtricks.com/wholly-jquery-plugin/