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" />

我正在尝试将输入“name”中输入的任何值直接作为html表中的新行，并在“No.”中附加运行编号（1,2,3等）列使用“Enter”键而不是单击按钮。同时，“名称”中的值将被清除并聚焦，以便为下一个值入口做好准备。

Answer 1

我会在这里给你一个骨头，因为这是非常简单的代码（而且你是新的）。试试这个 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 2

Jeebison，

对javascript不熟悉我将更多地将其作为教程而不是确切的答案。

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

获取输入值
按键检测
插入新行
将行设置为输入值

好的，现在我们已经将每个问题都解决了很多小任务。这样可以更容易地找到问题每个小节的答案吗？

下一步 - 你知道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'）正在进行额外的选择，这会减慢代码的速度，并使其在附加到该对象的函数内部冗余。我们可以在侦听器中使用$（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>

Answer 3

欢迎使用Stackoverflow。

如果您正在使用jQuery，请查看jQuery's API以获取有关可用功能的详细信息。您的具体问题似乎与事件有关 - 您可以了解有关here的更多信息。

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

我希望有所帮助。

参考文献：

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

3 个答案: