0

私は2つのテキストフィールドを持つ単純なフォームを持っておりName、ボタンPhoneをクリックすると新しいフィールドを追加できAdd newます。ここでjsfiddleを参照できます。

私の問題は、Add Newボタンを押さずに新しいテキストフィールドを追加する方法ですか？ユーザーがいっぱいになるText Input nameと、Text Input Phone新しい行<tr class="person">が自動的に追加されます。

私の2番目の問題は、削除用のコードの書き方がわからないことです。

更新：最大クローンも設定したいのですが、これはできますか？

4

3 に答える 3

3

「塗りつぶし」が「ユーザーが電話フィールドで許可されている数の文字を入力したとき」を意味する場合はmaxlength="10"、入力に属性を追加できます（適切な値を設定します）。

<input type="text" name="phone[]" id="phone" maxlength="10"/>

...そして、現在の値が：keyupに達したかどうかをチェックするハンドラーをイベントに追加します。maxlength

$('input[name="phone\[\]"]').keyup(function() {
    if (this===$('input[name="phone\[\]"]').last()[0]
        && this.value.length===+$(this).attr("maxlength")) {
        $("#add").click();
    }
});

このテストは、ユーザーが最後の行に入力している場合にのみ実行する必要があることに注意してください。したがって、if上記のテストの最初の部分です。

また、新しく複製されたフィールドを空白にしたい場合もあるので、add関数内でこれを行うことができます。

$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last')
                           .find("input").val("");

行の最大数を設定するには、add関数にテストを配置できます。

$("#add").click(function() {
    var $lastRow = $('#mytable tbody>tr:last');
    if ($lastRow.index() < 10) { // set maximum rows here
        $lastRow.clone(true).insertAfter($lastRow).find("input").val("");
    }
    return false;
});

また、これらの入力に属性を指定する必要はありませんが、指定する場合は、一意である必要があるidため、クローンを作成するときにコピーしないでください。id

削除機能の場合、各行に削除ボタンを追加します。

<td><input type="button" class="deleteRow" value="Delete"/></td>

...その後：

$("#mytable").on("click","input.deleteRow", function(){
    if ($("#mytable tr").length > 2) // don't delete the last row
        $(this).closest("tr").remove();
});

デモ： http： //jsfiddle.net/3J65U/15/

于 2012-11-05T02:49:26.147 に答える
0

blur新しいボタンを追加するだけでなく、それを行うこともできます。また、重複するIDに注意し、代わりにクラスを使用してください。

<tr class="person">
  <td><input type="text" name="name[]" class="name" /></td>
  <td><input type="text" name="phone[]" class="phone" /></td>
</tr>

次に、jQueryで：

$('.phone').blur(function() {
  var ppl = $('.person').length;
  if ( this.value && ppl < 5 ) { // Max 5 people
    $(this).closest('tr').clone(true)
      .insertAfter('#mytable tr:last')
      .find('input').val('').first().focus();
    $(this).off('blur');
  }
});

デモ： http： //jsfiddle.net/elclanrs/YEBQt/（入力から入力へのタブ）

于 2012-11-05T02:39:23.983 に答える
0

私は宣言を拡張します-私は.blur()各テキストボックスに使用します、そして毎回チェックして各値が""でないことを確認します-それは両方が満たされていることを確認します

次に、jQueryで：

$(document).ready(function() {
    $(".phone").blur(function() {
      var phonetxt = $('.phone'.val();
      var nametxt = $('.name').val();
      if ( phonetxt != "" && nametxt != "" ){
        $(this).closest('tr').clone(true)
            .insertAfter('#mytable tr:last')
            .find('input').val('').first().focus();
    });
}

 $(".name").blur(function() {
    var phonetxt = $('.phone'.val();
    var nametxt = $('.name').val();
    if ( phonetxt != "" && nametxt != "" ){
        $(this).closest('tr').clone(true)
            .insertAfter('#mytable tr:last')
            .find('input').val('').first().focus();
    });
  }
});​
于 2012-11-05T02:43:46.743 に答える