JQuery select visual column in table with rowspan

Question

I saw several similar questions, but did not answer anything to this specific problem. Consider the following table:

<table id="foo" border="1px"> <tr> <td rowspan="2">one</td> <td>two</td> <td rowspan="2">three</td> <td>four</td> <td>five</td> </tr> <tr> <td rowspan="2">two</td> <td>four</td> <td>five</td> </tr> <tr> <td rowspan="2">one</td> <td>three</td> <td>four</td> <td>five</td> </tr> <tr> <td>two</td> <td>three</td> <td>four</td> <td>five</td> </tr> </table> 

Using jQuery, how can I select all the elements in a specific column? For example, if I want to select column 3, I should get all td with “three” as the content.

Answer 1

I didn’t look at the hosted plugin, but I found an interesting question, so I created a violin!

http://jsfiddle.net/PBPSp/

If the pluggin works, it might be better than this, but it was a fun exercise so I could post it.

Change colToGet to whatever column you want to highlight.

 $(function() { var colToGet = 2; var offsets = []; var skips = []; function incrementOffset(index) { if (offsets[index]) { offsets[index]++; } else { offsets[index] = 1; } } function getOffset(index) { return offsets[index] || 0; } $("#foo > tbody > tr").each(function(rowIndex) { var thisOffset = getOffset(rowIndex); $(this).children().each(function(tdIndex) { var rowspan = $(this).attr("rowspan"); if (tdIndex + thisOffset >= colToGet) { if(skips[rowIndex]) return false; $(this).css("background-color", "red"); if (rowspan > 1) { for (var i = 1; i < rowspan; i++) { skips[rowIndex + i] = true; } } return false; } if (rowspan > 1) { for (var i = 1; i < rowspan; i++) { incrementOffset(rowIndex + i); } } }); }); });​ 

Answer 2

This plugin handles a complex selection of colspan and rowspan:

 $('#foo th:nth-col(3), #foo td:nth-col(3)').css("color","red"); 

Answer 3

I'm not sure how you want to select them, but something like this?

 $(function() { $("#foo").find("td:contains('three')").css("background-color","#eee"); }); 

What do you want to do with TDs after choosing them?

Answer 4

Give each of your row / column classes. So, the 1st row column will have class='Row1 Column1' Then select the class you want. (If you don’t want to ever select rows, you won’t need a row specification just trying to extrapolate how to make the grid.

Answer 5

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

This description is https://github.com/gajus/wholly , the plugin I developed for this purpose. Using events, you can find all the values ​​in a row or in a column, including those that were associated with using the rowspan or solspan properties.

I made a visualization illustrating the table and the events that fire when navigating.

Orange is the active cell, red are the cells triggered by the vertical event, and blue are the cells caused by the horizontal event.