Question

让我们说我们只有一个简单的表格如下。我可以通过按Tab键浏览TD。

<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

当我在最后一个TD上按Tab键时，我想添加一个新的TR。我尝试了很多东西，但我无法让它发挥作用。

希望有人有解决方案！

编辑：

目前这是我试图开始工作的剧本。

$(document).keydown(function(e) {
   if (e.keyCode === 9) {
       var test = $(this).closest("td").next().find("td");
       console.log(test);

       $('tr:last td:last').addClass('last').css({backgroundColor: 'yellow'});

       if($('td').hasClass("last")) {
           $(this).append('test');
       }
   }
});

Answer 1

您可以尝试这样的事情

<强>的Javascript

$('table').on('keydown', 'input', function (e) {
    var keyCode = e.keyCode;
    if (keyCode !== 9) return;
    var $this = $(this),
        $lastTr = $('tr:last', $('table')),
        $lastTd = $('td:last', $lastTr);
    if (($(e.target).closest('td')).is($lastTd)) {
        $lastTr.after($lastTr.clone());
    }
});

<强> Check Fiddle

Answer 2

假设您的意思是使用输入元素，您可以执行一些操作，在表格之后添加额外的输入元素，然后将焦点事件添加到此元素。

例如：

<table>
    <tr>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
    </tr>
</table>
<div id="hideAddRow">
    <input type="text" id="addRow"/>
</div>

以下是js：

$('#addRow').on('focus', function () {
  alert('add new row code here.'); 
});

或者看看这个jsfiddle示例：http://jsfiddle.net/sGQ23/

在最后一个td的按下选项卡上添加表格行

2 个答案: