Acceso relativo a las celdas de la tabla usando jQuery

Question

Tengo una tabla anidada 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>

Entonces, necesito cerrar las celdas de mi '#myCell' - a la izquierda, a la derecha, arriba, abajo.

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 está bien. Ahora necesito obtener las mismas celdas con un diseño de tabla específico.

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

Este diseño implica que podría obtener las celdas superior, derecha e inferior.

Answer 1

No hay una solución directa. He usado la matriz de proyección para calcular celdas cercanas. Mi solución lanzada en GridWizard - HTML Table Constructor

Answer 2

puede intentar definir funciones especiales para recuperar cada posible celda hermana

var myCell = $('#myCell');

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

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

y en las celdas faltantes solo recibirás nulo;

Answer 3

Lamentablemente, tr's y td's no son confiables cuando se trata de problemas colspan / rowspan. SO1303106 muestra una solución que crea una matriz de cada fila / columna y crea algunas funciones para ayudarlo a consultarla. Este artículo inspiró esa solución y muestra el problema. La solución no es específica de jQuery, y no me sorprendería si a alguien se le ocurre una solución mejor.

Answer 4

Llegué a esta pregunta buscando algo ligeramente diferente. Quizás esto ayude. Dada la siguiente tabla:

<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 esto proporcione otra opción y conocimiento.