【问题标题】: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 中的输入文本框才分配了该类。

标签: javascript jquery html html-table


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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-09
    • 2011-03-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多