jquery在使用输入键输入文本输入时动态添加带有值的表格行

Question

好的..这是我的第一个问题。用JavaScript很新，所以希望我会很好地处理（交叉手指）...我有一个HTML代码到这里：

<table width="500" border="1"> 
    <tr> 
    <td>No.</td> 
    <td>Name</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 
<br /> 
Enter Name: 
<input type="text" name="name" id="name" /> 

我想有我在输入“输入名称的任何值“直接作为一个新的行在HTML表中附加一个运行号（1,2,3等）在”否“列使用“Enter”键代替点击按钮。同时，“名称”中的值将被清除并聚焦，以便为下一个值入口做好准备。

Answer 1

Jeebison，

作为新的JavaScript我打算这句话更像是一个教程比确切的答案。

首先要做的是 - 为了实现这一目标需要采取哪些步骤？

1. 获得输入
2. 值检测“ENTER”键按下
3. 插入新行
4. 行设置为输入的值

好了，现在我们已将每个问题都分解为许多小任务。这使得在问题的每个小节中寻找答案变得更容易？

Next - 你知道JavaScript框架吗？

在编写JavaScript时，许多浏览器处理标准的不同部分，或者根本不支持某些部分。因此，完全用手写javascript不仅麻烦，而且很难编写跨浏览器。框架使开发变得更加简单和清洁，因为它们是为了在所有浏览器中处理相同的功能而构建的。

http://jquery.com - 这是我的最爱，很容易使用，所以我会给你举例说明。

好的，在编码上。

首先，我们需要将框架链接到html页面。如果它是一个小型网站，或者你在玩耍，我喜欢让谷歌为我托管jQuery。通常你可以下载它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

实际添加代码，使使用jQuery的，我们需要添加一些脚本标记，等待DOM（文档对象模型），以准备在页面上。

<script type="text/javascript"> 
$(document).ready(function() { 
    // do stuff when DOM is ready 
}); 
</script> 

现在我们需要选择我们试图从中获取数据的元素。 jQuery选择器是完美的。一个简单的例子是通过其“id”属性来获取元素。

在输入的情况下，我们将使用“名称”。在选择器中引用ID时，我们总是在前面加上＃。

$('#name').val() 

这会给我们输入的值。现在再添加一行。

您的餐桌没有ID，但让我们给它一个。

<table id='numbers'> 

添加HTML该行

$('#numbers').append('<tr><td></td><td></td></tr>'); 

选择我们刚才添加的行的第一列，并添加数。

var rows = $('#numbers tr').length; 
$('#numbers tr:last td:first').html(rows); 

拷贝输入的值，第二列

$('#numbers tr:last td:last').html($('#name').val()); 

删除空输入

$('#name').val(''); 

我们检测击键我们会监听器连接到输入和地点所有这些代码里面。

$('#name').on('keyup', function(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
     $('#numbers').append('<tr><td></td><td></td></tr>'); 
     var rowcount = $('#numbers tr').length; 
     $('#numbers tr:last td:first').html(rowcount); 
     $('#numbers tr:last td:last').html($('#name').val()); 
     $('#name').val('').focus(); 
    } 
}); 

这看起来不错，除了$（“名”）是使多余的选择，放慢您的代码和它连接到该对象的函数内部冗余。我们可以用$（本），而不是$（“＃名称”），它引用由

$('#name').on('keyup', function(e) { 

完成了初始选择的侦听器的内部，我们有 -

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#name').on('keyup', function(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
     $('#numbers').append('<tr><td></td><td></td></tr>'); 
     var rowcount = $('#numbers tr').length; 
     $('#numbers tr:last td:first').html(rowcount); 
     $('#numbers tr:last td:last').html($(this).val()); 
     $(this).val('').focus(); 
    } 
    }); 
}); 
</script> 

Answer 2

因为这是非常简单的代码（你是新的），所以我会在这里抛出一块骨头。试试这个jsFiddle example。

HTML

<table width="500" border="1"> 
    <tr> 
    <td>No.</td> 
    <td>Name</td> 
    </tr> 
</table> 
<br /> 
Enter Name: 
<input type="text" name="name" id="name" />​ 

jQuery的

var index = 1; 
$('input[name=name]').on('keyup', function(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
     $('table').append('<tr><td></td><td></td></tr>'); 
     $('table tr:last td:first').html(index); 
     $('table tr:last td:last').html($(this).val()); 
     $(this).focus().select(); 
     index++; 
    } 
});​ 

Answer 3

欢迎＃1。

如果您使用的是jQuery，请查看jQuery's API了解有关可用函数的详细信息。你的具体问题似乎围绕着事件 - 你可以了解更多关于here的信息。

总之，您需要绑定将结果委托给另一个控件的事件。我建议看看keyup函数。

我希望有帮助。

参考文献：

• http://api.jquery.com/
• http://api.jquery.com/category/events/
• http://api.jquery.com/keyup/