Question

我有以下form：

   <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>

更新

我的要求是，当我点击添加按钮时，应该添加一些上述字段，如select，input标签。

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

即使更新了你的问题，看起来你在这里有点迷失了。这段代码应该有效，但我只是假设你的页面应该是这样的。

我已经用CLASSES替换了无用的ID，因此您可以避免ID重复，但当然您可以解决它并在必要时放回ID。

<强> HTML

<table id="TextBoxesGroup">
    <tr class="type">
        <td>
            <label>Type</label>
        </td>
        <td>
            <select>
                <option value="1">Audio</option>
                <option value="2">Video</option>
            </select>
        </td>
    </tr>
    <tr class="name">
        <td>
            <label>Name</label>
        </td>
        <td>
            <input type="text" name="name" />
        </td>
    </tr>
    <tr class="comments">
        <td>
            <label>comments</label>
        </td>
        <td>
            <textarea rows="2" cols="2"></textarea>
        </td>
    </tr>
</table>
<table>
    <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>

Javascript（jQuery）

$(function () { // Short way for document ready.
    $("#addButton").on("click", function () {
        if ($(".type").length > 10) { // Number of boxes.
            alert("Only 5 textboxes allow");

            return false;
        }

        var newType = $(".type").first().clone().addClass("newAdded"); // Clone the group and add a new class.
        var newName = $(".name").first().clone().addClass("newAdded"); // Clone the group and add a new class.

        newType.appendTo("#TextBoxesGroup"); // Append the new group.
        newName.appendTo("#TextBoxesGroup"); // Append the new group.
    });

    $("#removeButton").on("click", function () {
        if ($(".type").length == 1) { // Number of boxes.
            alert("No more textbox to remove");

            return false;
        }

        $(".type").last().remove(); // Remove the last group.
        $(".name").last().remove(); // Remove the last group.
    });

    $("#resetButton").on("click", function () {
        $(".newAdded").remove(); // Remove all newly added groups.
    });
});

Demo

Answer 2

喜欢这个？每一行都有一个唯一的id，但所有都在class＆＃34; .cont＆＃34; 。这就是它。玩得开心！

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--;
    });

});

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

2 个答案: