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

入力「name」に入力した値を使用して、「No」に実行番号（1、2、3など）が付加されたhtmlテーブルの新しい行として直接移動しようとしています。ボタンをクリックする代わりに「Enter」キーを使用して列を作成します。同時に、「名前」の値がクリアされ、次の値の入力の準備ができるようにフォーカスされます。

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. 「Enter」キーの押下を検出する
  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」属性によって要素を取得することです。

入力の場合、「名前」を使用します。セレクターで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);

入力の値を2番目の列にコピーします

$('#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'）が余分な選択を行ってコードの速度を低下させ、そのオブジェクトにアタッチされた関数内で冗長になることを除けば、これは良さそうです。によって行われた最初の選択を参照するリスナー内で$（'＃name'）の代わりに$（this）を使用できます

$('#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をチェックして、使用可能な関数の詳細を確認してください。あなたの具体的な質問はイベントに関するもののようです-あなたはここでもっと学ぶことができます。

つまり、結果を別のコントロールに委任するイベントをバインドする必要があります。キーアップ機能を見てみることをお勧めします。

それがお役に立てば幸いです。

参照：

于 2012-08-01T19:16:23.923 に答える