htmlページにフォーム要素とテーブル要素を動的に追加する

Question

テーブルの要素とフォーム要素をhtmlページに動的に追加したいが、それはできない。入力ボックスに2を入力している場合は、ボタンをクリックせずに自動的に2つの新しい入力ボックスにラベルを追加する必要があります。私は 'keyup'イベントハンドラはここで動作するはずだと思います。しかし私は自分のコードを形成することができません。私のコードを修正したり、私の同じ必要性のために他のコードを提案したりして、ここで私を助けてください。

HTMLのCODE：

<form> 
    <input type="number" id="teamMemNum"> 
</form> 
<table id="memNameTable"></table> 

JAVASCRIPT：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#teamMemNum").on('keyup', function(){ 
      var num = $("#teamMemNum").val(); 
      var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>"; 
      for(var i = 0; i < num; i++){ 
       $("#memNameTable tbody").append(markup); 
      } 
     }); 
    }); 
</script> 

Answer 1

実際にユーザが行の数を貼り付けてもよいです。

入力フィールドの値が変更されたときにもテーブルをクリアする必要があります。

$(document).ready(function(){ 
 
     $("#teamMemNum").on('change paste keyup', function(){ 
 
      $("#memNameTable").html(""); 
 
      
 
      var num = $("#teamMemNum").val(); 
 
      var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>"; 
 
      for(var i = 0; i < num; i++){ 
 
       $("#memNameTable").append(markup); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="number" id="teamMemNum"> 
 
</form> 
 
<table id="memNameTable"></table>

Answer 2

あなたtableは空であり、あなたがtbodyに新しいmarkupを追加しようとしています。ただ、すべてがうまくあなたが1回の小さな変更でそれを持っているように動作しなければならないように見えますあなたのtable

<form> 
    <input type="number" id="teamMemNum"> 
</form> 
<table id="memNameTable"> 
    <tbody></tbody> 
</table> 

Answer 3

にtbodyを追加します。ループでは、このセレクタは$("memNameTable tbody")ですが、HTMLにはtbodyがありません。 tbodyをHTMLのテーブルに追加するか、セレクタを$("memNameTable")に変更します。

Answer 4

いくつかのポインタ：

• あなたの数値入力ではなくkeyupイベントよりchangeイベントを聴くべきである（これはアップを経由して、入力ボックス内の上下矢印考慮にサイクリングを取ります） 。

• 追加する行の数を決定するには、入力ボックスの数値 から既存のテーブル行の数を減算する必要があります。

• テーブル内にtbodyがない可能性があります。 をtable要素に直接追加するだけです。

$(document).ready(function() { 
 
    $("#teamMemNum").on('change', function() { 
 
    var num = $("#teamMemNum").val() - $('#memNameTable tr').length; 
 
    var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>"; 
 
    for (var i = 0; i < num; i++) { 
 
     $("#memNameTable").append(markup); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="number" id="teamMemNum"> 
 
</form> 
 
<table id="memNameTable"></table>

Answer 5

他の人が指摘したように、あなたはあなたのテーブルの上にTBODYを逃しています。

もう1つの点は、（onBlurやonChangeなどの）より広範なイベントを使用する必要があることです。

私の意見では、同じIDの要素を追加しないでください（HTMLを非準拠としてレンダリングします - 将来的にあなたや他の人に頭痛を与えるかもしれませんが）。

言い換えれば、私はHTML文字列の操作にはあまり慣れていないので、できるだけそれを避けようとしています。したがって、 "ダミー"行を使用することをお勧めします。次のようになります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
    <input type="number" id="teamMemNum"> 
</form> 
<table id="memNameTable"> 
    <tbody> 
    <tr class="hidden sampleTR"> 
     <td><label for='memName' class="lineLabel">Enter name: </label></td> 
     <td><input type='text' name='memName'></td> 
     <td></td> 
     <td></td> 
    </tr> 
    </tbody> 
</table> 


<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#teamMemNum").on('change', function(e){ 
     var num = $("#teamMemNum").val(); 

     for(var i = 0; i < num; i++){ 

      //Clone a new line from the dummy sample (invisible) line 
      var newLine = $('#memNameTable').find('tr.sampleTR').first().clone(); 

      //Generate a new id to be used 
      var newID = 'memName_' + $('#memNameTable').find('tr').length; 

      //Sets the new ID on the newLine elements 
      $(newLine).find('input[name=memName]').attr('id', newID); 
      $(newLine).find('label.lineLabel').attr('for', newID); 

      //Append the newLine to the TBody of the Table 
      $(newLine).appendTo($("#memNameTable tbody")); 
     } 
    }); 
}); 
</script> 

これは、HTMLとコードを混在させないためのより明確な方法です。

注：.hiddenのcssクラスは、{ display:none; }または同等のものに設定する必要があります。