如何在 jQuery 中逐行引用 HTML 表格单元格、col 索引 - cell(3,4)

Posted 2023-03-05

【中文标题】如何在 jQuery 中逐行引用 HTML 表格单元格、col 索引 - cell(3,4)

【英文标题】：How to refer to HTML table cell by row, col index in jQuery - cell(3,4)

【发布时间】：2020-11-08 05:07:41

【问题描述】：

我是 jQuery 新手。我可以从活动单元格中提取列号和行号（见下文），但我找不到在 jQuery 中引用表格单元格的方法，就像在其他语言中一样使用行和列索引（例如在 Python 的 Pandas 中）。

$('td').click(function()
  var colIndex = $(this).closest("td").index();
  var rowIndex = $(this).closest("tr").index();
  //do something here
)

是否可以在jQuery中使用行列索引来引用单元格？

这是我在网上找到的最佳解决方案，但它不允许我传递行号和列号的变量。我想我越来越近了，但我不确定这是否是最好的方法。

示例：第 3 行第 3 列单元格的 Cell(3,3)：

var cell = $('table').find('tr:eq(3)').find('td:eq(3)')

这将使使用表格时的生活变得更加轻松。能给个建议吗？

【问题讨论】：

您首先说“在 jQuery 中找不到引用表格单元格的方法”，最后您给出了一种可能的方法来做到这一点？你有什么问题？

感谢您回来。我想我没有意识到我可以连接变量以将行和列的索引传递给这个方程。下面有2个有趣的方法的答案。

【参考方案1】：

您实际上并不需要 jQuery 来执行此操作。取出 DOM 表格元素更容易，并使用它的rows 和嵌套的cells 属性：

let $td = $($("table").get(0).rows[1].cells[2]);
console.log($td.text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>d</td><td>e</td><td>f</td></tr>
</table>

【讨论】：

很好，这就是我想要的。看起来非常简洁明了！谢谢！ -- var cell = $( $('table').get(0).rows[ row_no ].cells[ col_no ] )

【参考方案2】：

您可以将变量连接到选择器的:eq() 部分：

var cell = $('table').find('tr:eq(' + rowIndex + ')').find('td:eq('+ colIndex + ')')

或者更简单的是使用eq()方法

var cell = $('table tr').eq(rowIndex).find('td').eq(colIndex)

【讨论】：

当表格有嵌套表格时，这可能会给出不可靠的结果。

谢谢，我有一个简单的单表，但这很好。我原以为 jQuery 会有类似单元格对象的东西，但事实并非如此。对于嵌套表，我认为我们需要给每个表 id 或分配类？

children() 而不是find() 是一种可能性，因为它不包含嵌套表行，并且您希望使用比'table' 更具体的选择器

仍然“table tr”可以匹配“table tr td table tr”。

@trincot 当然，但这就是我提到使用儿童或儿童选择器的原因