getting diagonal and vertical adjacent cells of a table in jquery

Question

I have a 4X4 table. I want to get to get adjacent that are vertical, and diagonal on the top on bottom. I don't have a problem getting them when the cell i click on is around the edges because i can use something like this.

above = $(that).parent().prev().children().first()
below = $(that).parent().prev().children().last()
diagonalLeft = $(that).parent().children().last().prev()
diagonalRight = $(that).parent().children().first().next()

But when i have one of these cases, when I can't use the first or last one, I don't know what to do. I can't figure out the logic for it.

Answer 1

You just have to count backwards to tell what column you're currently in.

var $that = $('td.yourActiveTD')

    , rowNum = $that.parent().prevAll('tr').length
    , colNum = $that.prevAll('td').length

    , above = $that    // td
        .parent()      // tr
        .parent()      // table or tbody
        .children('tr')
        .eq(rowNum - 1) // the row above this one
        .children('td')
        .eq(colNum)    // in the same column as this
;

From that, you should be able to get whichever cell you want just by changing the .eq() lines.