0

テーブルの最後のセルにデータを入力するときに、新しい行をテーブルに追加したいと考えています。

リンクを使用してこれを行う方法について、このフィドルを見てきました。これを変更して、最後の td で onChange を使用して追加の行が追加されるようにします。

したがって、jquery 1.7 を使用すると、コードは次のようになります。

<table class="authors-list">
  <tr><td>author's first name</td><td>author's last name</td></tr>
  <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" /></td></tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

<script type="text/javascript">
var counter = 1;
jQuery('a.add-author').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
});
</script>

これを変更して、データの変更/入力に関する行を最後の TD に動的に追加したいと考えています。

何かのようなもの、

<table class="authors-list">
  <tr><td>author's first name</td><td>author's last name</td></tr>
  <tr><td><input type="text" name="first_name" /></td><td><input type="text" name="last_name" onclick="add-author"/></td></tr>
</table>


<script type="text/javascript">
var counter = 1;
jQuery('a.add-author').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');
    jQuery('table.authors-list').append(newRow);
});
</script>

そのため、onclick / onchange は jQuery をトリガーして、カウンター値に従って一意の ID を持つ新しい行を追加します。

どんな助けでも大歓迎です。

4

2 に答える 2

2

入力にchangeイベントを使用onして、動的に追加された行の入力に対しても機能するようにします。

これを試して

更新しました

var counter = 1;
jQuery("table.authors-list").on('change','input[name^="first_name"]',function(event){
  event.preventDefault();
  counter++;
  var newRow = jQuery('<tr><td><input type="text" name="first_name' +
    counter + '"/></td><td><input type="text" name="last_name' +
    counter + '"/></td><td><a class="deleteRow"> x </a></td></tr>');
  jQuery('table.authors-list').append(newRow);
});

 jQuery("table.authors-list").on('click','.deleteRow',function(event){

   $(this).closest('tr').remove();
 });

私はfirstnameここで入力のために変更イベントを取っています..あなたはそれをあなたが望む任意のセレクターに変更することができます...

注：入力変更イベントの場合、その特定の入力がぼやけている場合（フォーカスが失われた場合）にのみトリガーされます

ここでフィドルが 更新されたフィドル

于 2013-03-18T13:34:16.517 に答える
1

最終的に達成しようとしていることに応じて解決する必要がある他のいくつかのバグを提示することになりますが、このような何かでそれは実行されます。

変更ではなくキーアップでトリガーすることにより、さらに空白行を追加せずにコンテンツを編集できます。

http://jsfiddle.net/yUfhL/209/

var counter = 1;
jQuery("table.authors-list").on("keyup", "input[name*='last_name']", function(event){
    event.preventDefault();
    if($(this).val().length == 1) {
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="first_name' +
        counter + '"/></td><td><input type="text" name="last_name' +
        counter + '"/></td></tr>');

        jQuery('table.authors-list').append(newRow);
    }
});
于 2013-03-18T13:33:03.500 に答える