Question

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

因此，点击底部输入字段会在其下方插入一个新行，然后我可以输入我的名字并点击Tab键继续下一个，然后再在它下面添加一个新行。

enter image description here

我的名字输入文件看起来像这样......

<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

Answer 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/试一试。）

问候

Answer 2

事实证明，只使用原生JavaScript很容易;仅在您的初始HTML的最后一行编写onfocus属性并执行此操作：

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

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

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

当底部行使用JavaScript获得焦点时，插入一个新的输入行字段

2 个答案: