Accès relatif aux cellules de tableau à l'aide de jQuery

Question

J'ai une table imbriquée 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>

Il faut donc que les cellules soient proches de mon "#myCell" - à gauche, à droite, en haut et en bas.

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];

Il semble que ça va. Maintenant, j'ai besoin d'obtenir les mêmes cellules avec une disposition de tableau spécifique.

<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>

Cette disposition implique que je puisse obtenir les cellules supérieure, inférieure droite.

Answer 1

Il n'y a pas de solution directe. J'ai utilisé la matrice de projection pour calculer les cellules proches. Ma solution a été publiée dans le GridWizard - Constructeur de table HTML

.

Answer 2

vous pouvez essayer de définir des fonctions spéciales pour récupérer chaque cellule sœur possible

var myCell = $('#myCell');

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

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

et sur les cellules manquantes, vous ne recevrez que null;

Answer 3

Malheureusement, les tr et les td ne sont pas fiables s’agissant des problèmes de colspan / rowspan. SO1303106 montre une solution qui construit une matrice de chaque ligne / colonne et crée des fonctions facilitant son interrogation. Cet article a inspiré cette solution et montre le problème. La solution n'est pas spécifique à jQuery, et je ne serais pas surpris si quelqu'un propose une meilleure solution.

Answer 4

Je suis venu répondre à cette question à la recherche de quelque chose de légèrement différent. Cela aidera peut-être. Étant donné le tableau suivant:

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

Utilisation de JQuery:

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

J'espère que cela vous fournira une autre option et un aperçu.