如何判断您当前是不是位于 HTML 表格的最后一行？

Posted 2023-03-05

【中文标题】如何判断您当前是不是位于 HTML 表格的最后一行？

【英文标题】：How to tell if you're currently in the last row of an HTML table?如何判断您当前是否位于 HTML 表格的最后一行？

【发布时间】：2011-05-25 13:55:40

【问题描述】：

我有一个 keydown 事件，用于向表格添加空白行。 但我只希望在光标位于表的最后一行时发生 keydown 事件时添加新行。

这是我当前的 jQuery 事件。 .glCreditValue 是输入文本框的类，它位于表格行的最后一个 TD 中。 因此，当用户退出该输入时，如果输入所在的 TD 在表的最后一行，我想添加一个新行。

由于表格数据是动态生成的，所以每一行的最终 TD 都有一个输入文本框，其类为 .glCreditValue。

$(".glCreditValue").keydown(function(event) 
        var keycode = event.keyCode;
        if (keycode == 9) 
            //HERE i would like to make sure that i'm in the last row of the table
            AddNewRow();
        
    );

我正在尝试使用 tr:last 选择器，但我不确定从这里到哪里去。

【问题讨论】：

您要处理整个最后一行的点击，还是只处理最后一行的最后一列？

只是最后一列，这就是我只指定 .glCreditValue keydown 的原因。只有每行最终 TD 中的输入文本框才分配了该类。

【参考方案1】：

有几种方法可以做到这一点，例如你可以检查.closest()父<tr>，看看它是不是.is()和:last-child，像这样：

$(".glCreditValue").keydown(function(event) 
  if (event.which == 9 && $(this).closest("tr").is(":last-child")) 
      AddNewRow();
  
);

【讨论】：

成功了！谢谢！我会在大约 6 分钟内“接受”作为我的答案，当它允许我时，哈哈。

@Nick 讨厌挖掘一个较旧的问题，但是在条件条件中添加对 shift 键的检查是否有用/可取？那会阻止“tab-left”触发条件，不是吗？很棒的答案，不管... :]

@Tieson - 当然，这取决于您所追求的 UI 行为。如果您想阻止转移，那么只需在该if 检查的开头添加一个!event.shiftKey && 。不过，从 UI 的角度来看，我希望 shift 版本能够撤消新行（如果它只是空的？），所以这将是您在 IMO 中想要的一些额外代码。

【参考方案2】：

一种避免运行选择器开销的方法是简单地获取the .closest() row，然后转到the .next() element 并测试its .length property。

如果您在最后一个<tr>，它将是0。

if( !$(this).closest('tr').next().length ) 
   // was the last row