jQuery select visual column in table with rowspan

Question

I have seen a few similar questions but nothing that answers 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 items in a specific visual column? For example, if I want to select column 3, I should get all td's with 'three' as content.

Answer 1

This plugin handles complex colspan and rowspan selection:

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

Answer 2

Haven't looked at the posted plugin, but I found the question interesting so I created a fiddle!

http://jsfiddle.net/PBPSp/

If the pluggin works it may be better than this, but it was a fun exercise so I may as well post it.

Change colToGet to whichever 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 3

If you want to support colspan and rowspan, then first you need to build table index, ie. matrix that identifies cell position in every row regardless of the markup. Then you need to track events of all the table cells and calculate their offset in the matrix and the columns that share the horizontal and vertical index.

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

I made a visualisation illustrating a table and the events that are triggered upon navigation.

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

Answer 4

I am 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 the TDs after you select them?

Answer 5

Give each of your row / columns classes. So row 1 column 1 would have class='Row1 Column1' Then select on the class as needed. (If you do not want to ever select on rows you would not need the row specification just trying to extrapolate out how to do the grid.