javascript - jqueryを使用してテーブル内にテキストボックスを生成する

Question

これが以下の準備テーブルであるとします。3行のそれぞれにテキストボックスがあり、その横に2つのボタン+または追加と削除用の-がありました。+をクリックすると新しいテキストボックスが生成され、クリックするとテキストボックスが削除されます。以下のサンプルのように:

---

このステップまたは手順のスニペットを提案できる人はいますか?

ありがとうございました

Answer 1

あなたはこれらの行に何かを書くことができます：

<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

if(counter>10){
        alert("Only 10 textboxes are allowed");
        return false;
}   

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });

 $("#removeButton").click(function () {
if(counter==1){
      alert("No more textbox to remove");
      return false;
   }   

counter--;

    $("#TextBoxDiv" + counter).remove();

 });
});
</script>

divをその場で作成したくない場合は、最後のテーブル行のIDを見つけて、それに1を追加し、テーブル行を作成してから、テキストボックス作成htmlを追加します。

Answer 2

html構造が次のようであると仮定します

<table border = "1">
<thead>
    <tr><td> Text Boxes </td></tr>
</thead>
<tbody>
    <tr><td><button class="add-text-box">+</button><button class="remove-text-box">-</button></td></tr>
    <tr><td><button class="add-text-box">+</button><button class="remove-text-box">-</button></td></tr>
    <tr><td><button class="add-text-box">+</button><button class="remove-text-box">-</button></td></tr>
</tbody>

次の jquery スニペットが機能するはずです

$(".add-text-box").click(function(){
    $(this).parent().prepend(" <input class='text-box' /> <br>");
});

$(".remove-text-box").click(function(){
    textboxes = $(this).parent().find('.text-box'); 
    $(textboxes).last().remove();
    if (textboxes.length === 0) {
        $(this).siblings().remove();
        $(this).remove();
    }        
});

ここで実際の動作を見ることができます