2

我有以下内容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>
</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();
  });

});


任何人都可以对此进行演示吗？

4

2 回答 2

2

像这样？
每行都有一个唯一的 id，但所有行都有相同的 class .cont。
这差不多。玩得开心！

解决方案

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

});
于 2014-05-30T11:00:20.630 回答
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.
    });
});

演示

于 2014-05-30T10:49:11.123 回答