0

好的..这是我的第一个问题。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”键而不是单击按钮。同时“name”中的值会被清空并聚焦，为下一个值入口做准备。

4

3 回答 3

5

我会在这里向你扔骨头，因为这是非常简单的代码（而且你是新手）。试试这个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++;
    }
});​
于 2012-08-01T19:14:26.967 回答
4

吉比森，

作为 javascript 的新手，我将把它作为一个教程而不是确切的答案来表述。

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

  1. 获取输入的值
  2. 检测“输入”键按下
  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') 进行额外的选择会减慢您的代码及其附加到该对象的函数内部的冗余。我们可以在监听器中使用 $(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>
于 2012-08-01T19:45:20.123 回答
0

欢迎来到 Stackoverflow。

如果您使用 jQuery，请查看jQuery 的 API以获取有关可用函数的详细信息。您的具体问题似乎与事件有关 - 您可以在此处了解更多信息。

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

我希望这会有所帮助。

参考：

于 2012-08-01T19:16:23.923 回答