jquery在使用回车键输入文本时动态添加具有值的表行

jquery to dynamically add table row with value upon entering text input using enter key

本文关键字：添加 动态 回车 文本 输入 jquery      更新时间：2024-06-14

好的。。这是我在这里的第一个问题。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" />

我试图让我在输入"name"中输入的任何值直接作为html表中的新行，并在"No."列中使用"enter"键而不是单击按钮，附加一个连续编号（1,2,3等）。同时，"name"中的值将被清除并集中，以便为下一个值入口做好准备。

吉普森，

作为javascript的新手，我将把这句话更多地作为一个教程，而不是确切的答案。

第一件事-需要采取哪些步骤才能实现这一点？

  1. 获取输入的值
  2. 检测"回车"键按下
  3. 插入新行
  4. 将行设置为输入的值

好的，现在我们已经把每个问题分解成许多小任务。这使得在问题的每个小节上寻找答案变得更加容易？

下一篇-你知道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"属性获取元素。

在输入的情况下，我们将使用"name"。在选择器中引用ID时，我们总是在它前面加一个#。

$('#name').val()

这将为我们提供输入的值。现在添加另一行。

您的桌子没有ID，但让我们给它一个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'）正在进行额外的选择，从而减慢代码及其附加到该对象的函数内部的冗余速度。我们可以在侦听器内部使用$（this）而不是$（'#name'），它引用完成的初始选择

$('#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>

我会在这里向您抛出一块骨头，因为这是非常简单的代码（而且您是新手）。试试这个jsFiddle示例。

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++;
    }
});​

欢迎使用Stackoverflow。

如果您正在使用jQuery，请查看jQuery的API，了解有关可用函数的详细信息。你的具体问题似乎是关于事件的——你可以在这里了解更多。

简而言之，您将希望绑定一个将结果委托给另一个控件的事件。我建议查看keyup函数。

我希望这能有所帮助。

参考文献：

  • http://api.jquery.com/
  • http://api.jquery.com/category/events/
  • http://api.jquery.com/keyup/
相关文章：