使用 JavaScript 在底行获得焦点时插入新的输入字段行答案

【问题标题】：Insert a new Row of Input fields when the Bottom Row gets Focus using JavaScript使用 JavaScript 在底行获得焦点时插入新的输入字段行
【发布时间】：2014-09-25 22:10:14
【问题描述】：

我正在构建一个 ToDO 样式列表。我的目标是每次最后一行/底行的名称文本输入字段获得焦点时插入一个新行。

因此，单击底部输入字段将在其下方插入一个新行，然后我可以完成输入我的姓名并点击选项卡以继续下一个，然后再次在其下方添加一个新行。

我的姓名输入文件如下所示...

<input class="name" name="name_1" id="name_1" size=45 type="text" value="" onfocus="myFunction(event)">

如您所见，现在，当文本输入获得焦点 onfocus="myFunction(event)" 时，它会调用此文本函数 myFunction(event)

function myFunction(e){
  add_task_row("","{$ID}","","","","","","","0");
  return false;
}

我的add_task_row 处理插入新行。

它目前有效，只要我点击或进入文本输入，它就会添加一个新行。问题是它发生在任何一行，我需要它只在最后一行被关注时才以这种方式运行。

我认为在myFunction() 内部可能有一些代码可以计算行数，然后只有fire the add_task_row 如果它是当前的最后一行？我只是不知道足够的 JavaScript 自己来做这件事，甚至不知道我是否走在正确的轨道上来做这件事？

感谢任何帮助，您可以看到我想要的输出/结果。希望尽可能多地使用原生 JavaScript

【问题讨论】：

考虑仅在原始 HTML 的最后一行编码“onfocus”。然后，每次添加一行时，您都可以调用removeFocus(this) 例程，这样只有新添加的最后一行才有onfocus 属性。
你在使用 jQuery 吗？使用最后一个选择器很容易查看您所在的行：$('#yourtableid tr:last') 如果没有，您需要做一些迭代 ala stackoverflow.com/a/9718646/1981678

标签： javascript

【解决方案1】：

所以这应该可以工作：

$(document).ready(function(){
    $('#table1').on('click','tr:last',function(){
        alert("!");
        $('#table1 tbody:last').append("\n<tr><td>Test</td></tr>");
    });
});

和表到脚本：

<table id="table1">
<tr><td>Test1</td></tr>
<tr><td>Test2</td></tr>
</table>

所以点击“Test2”会生成一个新行，内容为“Test”。

（我希望你使用 jQuery，因为它更简单。如果没有：http://jquery.com/ 试试看。）

问候

【讨论】：

我更喜欢原生 JS，因为整个应用程序目前还没有 jQuery。此外，我的行是更复杂的代码，并且是 DIV 而不是表格，现有内容无法更改

【解决方案2】：

结果证明只使用原生 JavaScript 很容易；仅在初始 HTML 的最后一行编码 onfocus 属性并执行以下操作：

<input type="text" onfocus="alert('focus');this.removeAttribute('onfocus');" >

用您的函数替换警报以构建新行（带有onfocus 属性。）在任何给定时刻，只有最后一行，无论是原始的还是插入的，将具有onfocus 属性。

编辑：或者也许调用this.removeAttribute在调用之前构建一个新行；这样，将有一段时间没有输入元素具有on focus，而不是两行具有此类属性的时间段。这是一件小事，但我很担心。

【讨论】：