Table Cells hover and rowspan

Question

I have a working example of JavaScript, which on table cell click selects current cell and all to the right and bottom. Here's jsFiddle with working code:

function selectCell(item){
    var cell = item.parentNode,
        table = cell.parentNode,
        rowPos = cell.rowIndex,
        colPos = item.cellIndex;

    $(table).find('td').removeClass('selected');

    for(r = rowPos; r < table.rows.length; r++) {
        for(c = colPos; c < table.rows[r].cells.length; c++) {
            jQuery(table.rows[r].cells[c]).addClass("selected");
        }
    }
}

Check working copy on http://jsfiddle.net/w3yPk/

The problem is, that my current script doesn't work when I have rowspan in table, see this jsFiddle with problem: http://jsfiddle.net/qTWaH/1/

I'm really stuck, maybe you have idea how to solve this?

Nice question! This looks like it's really a complicated problem, but I'll try finding a solution. Hang in there! — Joeytje50, Feb 09 '14 at 15:36

score 2 · Accepted Answer · edited May 23 '17 at 12:05

It seems like it doesn't recognise the cells, because they are basically the first, second and third of their row.

After googling this, I ended up on this SO answer, but that didn't provide a solution for your problem either. Then, after a bit more specific search, I ended up on this SO answer, which basically says "you NEED a jQuery plugin". If you want, you can use those answers, but I'll provide an alternative that doesn't need any plugins.

To fix this, I would simply add a hidden (display:block) cell below each colspan'd element. That way, JavaScript still recognises it as a space taken up. To make that work, I use the following jQuery function:

$('#demo-table td').each(function() {
    if (!$(this).is('[rowspan]')) return;
    var i = +$(this).attr('rowspan');
    var $nextRow = $(this).parent('tr');
    while (($nextRow = $nextRow.next()) && --i > 0) {
        $nextRow.prepend('<td style="display:none;"></td>');
    }
});

View demo.

I assumed here that your cells with a defined colspan will always be at the start of the table row. If they are not, I'm going to have to add a bit of code to it, but it would be possible to do that too. Just leave a comment about it if you need it to work for other positions of colspan too.

To explain what this code does, it goes through each table cell, and checks if it has a rowspan attribute. If it doesn't, it continues with the next cell. If it does have a rowspan, then it first gets the row itself, and the rowspan assigned to the cell. It then goes through each next row, decrementing the given rowspan, until it's zero. For every row it goes through, it prepends a hidden cell. That cell will tell JavaScript that the other cells are in another column, so it will give the right coordinates.

Thanks @Joeytje50, it's really working, let me try to implement it in my script before i confirm it helps :) — di3sel, Feb 09 '14 at 16:30
Works like a charm. That's why i love stackoverflow! :) Thanks mate — di3sel, Feb 09 '14 at 17:25

score 0 · Answer 2 · answered Feb 09 '14 at 15:52

try this,

for(r = rowPos; r < table.rows.length; r++) {
    if(jQuery(table.rows[r]).attr('class') == 'rowsp'){
        colPos = 0;
    } else {
        colPos = item.cellIndex;
    }
    for(c = colPos; c < table.rows[r].cells.length; c++) {
        jQuery(table.rows[r].cells[c]).addClass("selected");
    }
}

Table Cells hover and rowspan

2 Answers2