Относительный доступ к ячейкам таблицы с использованием jQuery

Question

У меня есть вложенная таблица 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>

Итак, мне нужно закрыть ячейки для моего «#myCell» - слева, справа, сверху, снизу.

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

Кажется, все в порядке. Теперь мне нужно получить те же ячейки со специальной таблицей.

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

Этот макет подразумевает, что я могу получить верхнюю, правую, нижнюю ячейки.

Answer 1

Прямого решения не существует. Я использовал проекционную матрицу для расчета около клеток. Мое решение выпущено в GridWizard - конструктор таблиц HTML

Answer 2

вы можете попытаться определить специальные функции для извлечения каждой возможной братской ячейки

var myCell = $('#myCell');

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

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

и в пропущенных ячейках вы просто получите ноль;

Answer 3

К сожалению, tr и td ненадежны при работе с проблемами colspan / rowspan. SO1303106 показывает решение, которое создает матрицу для каждой строки / столбца и создает некоторые функции, которые помогут вам выполнить запрос. Эта статья вдохновила это решение и продемонстрировала проблему. Решение не является специфичным для jQuery, и я не удивлюсь, если кто-то придумает лучшее решение.

Answer 4

Я пришел на этот вопрос в поисках чего-то немного другого. Возможно, это поможет. Учитывая следующую таблицу:

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

Использование JQuery:

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

Надеюсь, что это дает еще один вариант и понимание.