de acesso em relação a células da tabela usando jQuery

Question

Eu tenho um 3x3 tabela aninhada

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

Então, eu preciso para obter células fechadas para o meu '#myCell' - à esquerda, à direita, superior, inferior

.

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

Parece que é ok. Agora eu preciso obter as mesmas células com layout da tabela specefic.

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

Esta disposição implica que eu poderia obter top, right, as células de fundo.

Answer 1

Não há uma solução direta. Eu usei matriz de projeção para calcular células próximas. Minha solução lançado em GridWizard - HTML Table Constructor

Answer 2

Você pode tentar definir funções especiais para a recuperação de cada possível célula irmão

var myCell = $('#myCell');

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

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

e em células desaparecidas você só vai receber null;

Answer 3

Infelizmente, tr da e da TD não são confiáveis ??quando se lida com questões colspan / rowspan. SO1303106 mostra uma solução que constrói uma matriz de cada linha / coluna e cria algumas funções para ajudar você a consultá-lo. Este artigo inspirado que a solução, e mostra o problema. A solução não é jQuery específico, e eu não ficaria surpreso se alguém surge com uma solução melhor.

Answer 4

Eu vim accorss esta questão procurando algo um pouco diferente. Talvez isso vai ajudar. Dada a tabela a seguir:

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

Usando JQuery:

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

Espero que isso fornece outra opção e discernimento.