JQuery 在按钮单击时创建动态文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18503634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery to create dynamic textboxes on button click
提问by divz
I am new to jQuery. I want to dynamically add two text boxes with labels firstnameand lastnameon clicking the "Add" button.
我是 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>
I have a limit on adding the text boxes. Maximum of 7. At the same way, is there also a way to delete the text boxes?
我对添加文本框有限制。最多7个。同样的，有没有删除文本框的方法？
回答by Tushar Gupta - curioustushar
$('#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();
}
});
Updated after OP's comment
在 OP 评论后更新
$('#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();
}
});
回答by kondapaka
I hope The following code is more useful to you
我希望下面的代码对你更有用
<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>
回答by Sharad
I have modified your HTML little bit.
我稍微修改了你的 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>
Here is the jquery code
这是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>");
}
}
});
You can see it http://jsfiddle.net/x7uQx/12/
你可以看到它http://jsfiddle.net/x7uQx/12/
You can remove these also using .remove().
您也可以使用.remove().
回答by Abhishek Maurya
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#ddlSelect").change(function ()
{
$("#divTxtGroup").empty();
var num = this.value;
if (num > 0) {
for (i = 1; i <= num; i++) {
var newTextBoxDiv1 = $(document.createElement('div')).attr("id", 'divTxt' + i);
newTextBoxDiv1.after().html('<label>Textbox ' + i + ' : </label><input type="text" id="txt' + i + '">');
newTextBoxDiv1.appendTo("#divTxtGroup");
}
}
});
});
</script>
</head>
<body>
<select id="ddlSelect" name="ddlSelect">
<option value="0">-----Select-----</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div id='divTxtGroup'></div>
</body>
回答by Aniket Kulkarni
If you have id or class of table or textbox you want to remove then you can use .remove()function of jQuery. Here is link .remove()
如果您有要删除的表或文本框的 id 或类，那么您可以使用.remove()jQuery 的功能。这是链接.remove()
<script>
$("button").click(function () {
$("#id1").remove(); //this will remove your textfield or table or row from table whose id is id1
});
</script>
For adding you can either use .append()or .appendTo()depends upon your need.
对于添加，您可以使用.append()或.appendTo()取决于您的需要。
You problem is not clear yet but I think that's what are you looking for.
您的问题尚不清楚，但我认为这就是您要寻找的。
回答by Praveen
You can use .append()like this
您可以使用.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"/>');
});
Use .remove()to delete an element like this
使用.remove()删除这样的一个元素
$('#firstname, label[for="firstname"]').remove();
$('#lastname, label[for="lastname"]').remove();
