jquery - 如何动态添加或删除表单字段？

Question

我有以下表单:

<table>            
    <tr id="type">
        <td><label >Type</label></td>
        <td>
            <select>
                <option value="1">Audio</option>
                <option value="2">Video</option>
            </select>
        </td>
    </tr>

    <tr id="name">
       <td><label>Name</label></td>
       <td><input  type="text" name="name"></td>
    </tr>

    <tr id="form_fields">
        <td><label>comments</label></td>
        <td><textarea rows="2" cols="2"></textarea></td>
    </tr>       

     <tr>
         <td><input type="button" id="addButton" value="Add More"></td>
         <td><input type="button" id="removeButton" value="Remove"></td> 
         <td><input type="button" id="resetButton" value="Reset"></td> 
     </tr>      

     <tr>
         <td><input type="submit" value="submit" /></td>
     </tr>
</table>

我正在尝试动态添加上面的一些表格行，如下所示:

<div class="addThis">
    <tr id="type">
        <td><label >Type</label></td>
        <td>
            <select><option value="1">Audio</option>
            <option value="2">Video</option></select>
        </td>
    </tr>

    <tr id="name">
        <td><label>Name</label></td>
        <td><input  type="text" name="name"></td>
    </tr>
</div>

---

更新

我的要求是，当我单击添加按钮时，应添加上述一些字段，例如选择、输入标记。

1)添加按钮:单击添加按钮时，应添加选择和输入标签。

2) 删除按钮:单击删除按钮。如果添加了上述标签，则必须将其删除。

为了实现这一点，我在 jQuery 中尝试了一些东西，但我无法做到这一点。

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {
        if (counter > 10) {
            alert("Only 5 textboxes allow");
            return false;
        }   

        var newText = $('.addThis');
        newTextBox.appendTo("#form_fields");

        counter++;
  });


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

      counter--;

      $('addThis').remove();
  });

});

谁能给出这个演示吗？

Answer 1

像这样吗？
每行都有一个唯一的 ID，但所有行都具有相同的类 .cont。
差不多就是这样了。玩得开心!

Solution

var idnum = 0;
$(document).ready( function() {

    $('#addButton').click( function () {
        $(document.body).append(
            "<div class='cont' id='row" + idnum + "'>" +
            "    <tr>" +
            "        <td><label>Type</label></td>" +
            "        <td>" +
            "            <select>" +
            "                <option value='1'>Audio</option>" +
            "                <option value='2'>Video</option>" +
            "            </select>" +
            "        </td>" +
            "    </tr>" +
            "    <tr id='name'>" +
            "        <td><label>Name</label></td>" +
            "        <td><input type='text' name='name'></td>" +
            "    </tr>" +
            "</div>"
        );

        idnum++;
    });

    $('#resetButton').click( function () {
        $('.cont').remove();
    });

    $('#removeButton').click(function() {
        var rowName = '#row' + idnum;
        $(rowName).remove();
        idnum--;
    });

});