Relative access to table cells using jQuery

Question

I have a nested table 3x3

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td id='myCell'></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

So, i need to get cells closed to my '#myCell' - on the left, on the right, top, bottom.

var myCell = $('#myCell')[0];
var leftCell = myCell.previousSibling;
var rightCell = myCell.nextSibling;
var topCell = $(myCell).parent()[0].previousSibling().children()[myCell.cellIndex];
var bottomCell = $(myCell).parent()[0].nextSibling().children()[myCell.cellIndex];

It seems that is ok. Now i need get the same cells with specefic table layout.

<table>
  <tr>
    <td rowspan=3></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td id='myCell'></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

This layout implies that i could get top, right, bottom cells.

Answer 1

you may try defining special functions for retrieving each possible sibling cell

var myCell = $('#myCell');

function getLeft() {
  return $(myCell).previousSibling();
}

function getRight() {
  return $(myCell).nextSibling();
}
// etc for top/right

and on missing cells you'll just receive null;

Answer 2

Sadly, tr's and td's are unreliable when dealing with colspan/rowspan issues. SO1303106 shows a solution that builds up a matrix of each row/column and creates some functions to help you query it. This article inspired that solution, and shows the problem. The solution is not jQuery specific, and I wouldn't be surprised if someone comes up with a better solution.

Answer 3

There is no direct solution. I've used projection matrix to calculate near cells. My solution released in GridWizard - HTML Table Constructor