CODEWITHSUNDEEP
jqueryhtmlhtml-tablecell
Andrew Rumm
Andrew Rumm

Reputation: 1278

Relative access to table cells using jQuery

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.

Upvotes: 0

Views: 2380

Answers (4)

acrawly
acrawly

Reputation: 453

I came accorss this question looking for something slightly different. Perhaps this will help. Given the following table:

<table>
  <tr>
    <td>10</td>
    <td id='selectMe'>20</td>
  </tr>
  <tr>
    <td>30</td>
    <td>40</td>
  </tr>
</table>

Using JQuery:

$.('td#selectMe').prev('td'); //10
$.('td#selectMe').parent().next('td'); //30

Hope this provides another option and insight.

Upvotes: 0

Andrew Rumm
Andrew Rumm

Reputation: 1278

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

Upvotes: 0

gnarf
gnarf

Reputation: 106392

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.

Upvotes: 0

Eimantas
Eimantas

Reputation: 49354

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;

Upvotes: 1

Related Questions