使用 jQuery 对表格单元格的相对访问答案

【问题标题】：Relative access to table cells using jQuery使用 jQuery 对表格单元格的相对访问
【发布时间】：2017-01-02 00:15:47
【问题描述】：

我有一个 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>

这种布局意味着我可以获得顶部、右侧、底部的单元格。

【问题讨论】：

标签： jquery html html-table cell

【解决方案1】：

您可以尝试定义特殊函数来检索每个可能的同级单元格

var myCell = $('#myCell');

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

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

在丢失的单元格上，您只会收到 null；

【讨论】：

我明白了，我怎样才能得到右/左单元格。但是，当我尝试在开始时使用带有 rowspan=3 的表格单元格获取底部单元格时，这种代码不起作用。中间单元格的cellIndex属性为0；
不会是.prev() 和.next() 吗？

【解决方案2】：

遗憾的是，在处理 colspan/rowspan 问题时，tr 和 td 并不可靠。 SO1303106 展示了一个解决方案，它构建了每行/列的矩阵并创建一些函数来帮助您查询它。 This article 启发了该解决方案，并显示了问题。该解决方案不是特定于 jQuery 的，如果有人提出更好的解决方案，我不会感到惊讶。

【讨论】：

谢谢！我猜这是不可能的。已经用矩阵解决了这个问题。

【解决方案3】：

没有直接的解决方案。我使用投影矩阵来计算附近的单元格。我的解决方案发布于GridWizard - HTML Table Constructor

【讨论】：

【解决方案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

希望这能提供另一种选择和见解。

【讨论】：