de acesso em relação a células da tabela usando jQuery
-
08-07-2019 - |
Pergunta
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.
Solução 3
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
Outras dicas
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;
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.
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.