Question

我是jQuery的新手。我想在点击“添加”按钮时动态添加带有标签firstname和lastname的两个文本框。

<table border="0" cellspacing="2">
           <tr><td style= "width:200px;" align="right">Name
             <td>
             <input type="text" id="current Name" value="" />
            </td></td>
           </tr>                    
                    <tr>
                        <td align="right">Test value</td>
                        <td>
                            <select id="test" style= "width:350px;">                            
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">datas</td>
                        <td>
               <input type="button" id="add" value="Add" onclick="AddTables();"/>                       

                        </td>
                    </tr>

                    <tr>
                        <td style="height:3px" colspan="2"></td>
                    </tr>
                    <tr style="background-color: #383838">
                        <td></td>
                                            </tr>
                    <tr>

                    </tr>
                    <tr>

                        </div>
                        </div>
                        </td>
                    </tr>
                </table>

http://jsfiddle.net/x7uQx/

我对添加文本框有限制。最多7.同样，还有一种删除文本框的方法吗？

Answer 1

DEMO

$('#add').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length < 7) {
        table.append('<tr><td style="width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
    }
});
$('#del').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length > 1) {
        table.find('input:text').last().closest('tr').remove();
    }
});

.closest()

.append()

在OP的评论后更新

DEMO

$('#add').click(function () {
    var table = $(this).closest('table');
    console.log(table.find('input:text').length);
    if (table.find('input:text').length < 7) {
        var x = $(this).closest('tr').nextAll('tr');
        $.each(x, function (i, val) {
            val.remove();
        });
        table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
        $.each(x, function (i, val) {
            table.append(val);
        });
    }
});
$('#del').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length > 1) {
        table.find('input:text').last().closest('tr').remove();
    }
});

Answer 2

我希望以下代码对您更有用

<html>
<head>
<title>jQuery add / remove textbox example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
div{
    padding:8px;
}
</style>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>

<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

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

if(counter>10){
        alert("Only 10 textboxes allow");
        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();

 });

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

var msg = '';
for(i=1; i<counter; i++){
  msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
      alert(msg);
 });
  });
</script>
</head><body>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

</body>
</html>

Link

Answer 3

我稍微修改了你的HTML。

<table id="tbl" border="0" cellspacing="2">
           <tr><td style= "width:200px;" align="right">Name
             <td>
             <input type="text" id="current Name" value="" />
            </td></td>
           </tr>                    
                    <tr>
                        <td align="right">Test value</td>
                        <td>
                            <select id="test" style= "width:350px;">                            
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">datas</td>
                        <td>
               <input type="button" id="add" value="Add"/>                      

                        </td>
                    </tr>

                    <tr>
                        <td style="height:3px" colspan="2"></td>
                    </tr>
                    <tr style="background-color: #383838">
                        <td></td>
                                            </tr>
                    <tr>

                    </tr>
                    <tr>

                        </div>
                        </div>
                        </td>
                    </tr>
                </table>

这是jquery代码

$(document).ready(function(){
$("#add").bind("click",AddTables);
function AddTables(e)
    {
        if($("#tbl tr[addedrow='yes']").length<7)
        {
        $("#tbl").append("<tr addedrow='yes'><td>First Name</td><td><input type='text'/></td></tr><tr><td>Last Name</td><td><input type='text'/></td></tr>");
        }
    } 

});

你可以看到它http://jsfiddle.net/x7uQx/12/

您也可以使用.remove()删除这些内容。

Answer 4

如果您要删除表或文本框的id或类，则可以使用jQuery的.remove()函数。这是链接.remove()

<script>
 $("button").click(function () {
 $("#id1").remove();  //this will remove your textfield or table or row from table whose id is id1
 });
</script>

要添加，您可以使用.append()或.appendTo()，具体取决于您的需要。

.append()
.appendTo()

你的问题尚不清楚，但我认为你在寻找什么。

Answer 5

您可以像这样使用.append()

$('input[type=button]').on('click', function() {
$(this).append('<label for="firstname">first name</label> <input type="text" id="firstname"/>');
$(this).append('<label for="lastname">last name</label> <input type="text" id="lastname"/>');
});

使用.remove()删除像这样的元素

$('#firstname, label[for="firstname"]').remove();
$('#lastname, label[for="lastname"]').remove();

Answer 6

principals

JQuery在按钮点击时创建动态文本框

6 个答案: