使用jQuery动态添加/删除输入字段 [英] Add / remove input field dynamically with jQuery
问题描述
我想用jquery构建一个动态添加/删除表单。
IT应该如下所示:
名称类型是否必需?
示例输入:
>- 名称类型是否必需?
- 托尼管理员选中(复选框)删除<==按下按钮将删除该行
我得到的是一个添加/删除输入框的例子,它如何转换为我的想法?我必须使用多色表吗?感谢您的帮助
< html>
< head>
< title> jQuery添加/删除文本框示例< / title>
< script type =text / javascriptsrc =jquery-1.3.2.min.js>< / script>
< style type =text / css>
div {
padding:8px;
}
< / style>
< / head>
< body>
< h1> jQuery添加/删除文本框示例< / h1>
< script type =text / javascript>
$(document).ready(function(){
var counter = 2;
$(#addButton)。click函数(){
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 =textname =textbox'+ counter +
'id = textbox'+ counter +'value =>');
newTextBoxDiv.appendTo(#TextBoxesGroup);
counter ++;
$(#removeButton)。click(function(){
if(counter == 1){
alert(No more textbox删除);
返回false;
}
counter--;
$(#TextBoxDiv+ counter).remove() ;
});
$(#getButtonValue)。click(function(){
var msg ='';
for(i = 1; i msg + =\\\
Textbox#+ i +:+ $('#textbox'+ i).val );
}
alert(msg);
});
});
< / script>
< / head>< body>
< div id ='TextBoxesGroup'>
< div id =TextBoxDiv1>
< label>文字框#1:< / label>< input type ='textbox'id ='textbox1'>
< / div>
< / div>
< input type ='button'value ='Add Button'id ='addButton'>
< input type ='button'value ='删除按钮'id ='removeButton'>
< input type ='button'value ='Get TextBox Value'id ='getButtonValue'>
< / body>
< / html>
我冒昧地把jsFiddle放在一起,使用jQuery构建自定义表单的功能。 这里是...
编辑:更新了jsFiddle,为每个字段添加删除按钮。
编辑:根据最后评论中的请求,来自jsFiddle的代码如下。编辑:根据Abhishek的评论,我更新了jsFiddle(以及下面的代码),以满足可能出现重复字段ID的情况。
HTML:
< fieldset id =buildyourform>
< legend>建立您自己的表单!< / legend>
< / fieldset>
< input type =buttonvalue =Preview formclass =addid =preview/>
< input type =buttonvalue =Add a fieldclass =addid =add/>
JavaScript:
$(document).ready(function(){
$(#add)。click(function(){
var lastField = $ #buildyourform div:last);
var intId =(lastField&& lastField.length&&& lastField.data(idx)+ 1)|| 1;
var fieldWrapper = $(< div class = \fieldwrapper \id = \field+ intId +\/>);
fieldWrapper.data(idx,intId) ;
var fName = $(< input type = \text \class = \fieldname \/>);
var fType = $(<选择class = \fieldtype \>< option value = \checkbox \> Checked< / option>< option value = \textbox \> Text< / option> < option value = \textarea \>段落< / option>< / select>);
var removeButton = $(< input type = \button \class = \remove \value = \-\/&g ();
removeButton.click(function(){
$(this).parent()。remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
$(#buildyourform)。append(fieldWrapper);
});
$(#preview)。click(function(){
$(#yourform)。remove();
var fieldSet = $(< fieldset id = \\ \\yourform \>< legend>您的表单< / legend>< / fieldset>);
$(#buildyourform div)。each(function(){
var替换(field,);
var label = $(< label for = \+ id + \>+ $(this).find(input.fieldname)。first().val()+< / label>);
var input;
switch($(this).find(select.fieldtype)。first()。val()){
casecheckbox:
input = $(< input type = \ checkbox\id = \+ id +\name = \+ id +\/>);
break;
casetextbox :
input = $(< input type = \text \id = \+ id +\name = \+ id +\/ >);
break;
casetextarea:
input = $(< textarea id = \+ id +\name = \+ id +\> ;< / textarea的>中);
休息;
}
fieldSet.append(label);
fieldSet.append(input);
});
$(body)。append(fieldSet);
});
});
CSS:
body
{
font-family:Gill Sans MT;
padding:10px;
}
fieldset
{
border:solid 1px#000;
padding:10px;
display:block;
明确:两者;
margin:5px 0px;
}
legend
{
padding:0px 10px;
背景:黑色;
颜色:#FFF;
}
input.add
{
float:right;
}
input.fieldname
{
float:left;
clear:left;
display:block;
margin:5px;
}
select.fieldtype
{
float:left;
display:block;
margin:5px;
}
input.remove
{
float:left;
display:block;
margin:5px;
}
#yourform标签
{
float:left;
clear:left;
display:block;
margin:5px;
}
#yourform input,#yourform textarea
{
float:left;
display:block;
margin:5px;
}
I would like to use jquery to build a dynamic add/ remove form. IT should look like:
Name Type Required?
The example input :
- Name Type Required?
- Tony Admin checked (checkbox) Delete <==press the button will delete the row
What i have got is a example of add/ remove input box how can it convert to my idea? Do i have to use multi coloumn table? Thank you for kindly help
<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>
I took the liberty of putting together a jsFiddle illustrating the functionality of building a custom form using jQuery. Here it is...
EDIT: Updated the jsFiddle to include remove buttons for each field.
EDIT: As per the request in the last comment, code from the jsFiddle is below.
EDIT: As per Abhishek's comment, I have updated the jsFiddle (and code below) to cater for scenarios where duplicate field IDs might arise.
HTML:
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
</fieldset>
<input type="button" value="Preview form" class="add" id="preview" />
<input type="button" value="Add a field" class="add" id="add" />
JavaScript:
$(document).ready(function() {
$("#add").click(function() {
var lastField = $("#buildyourform div:last");
var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
fieldWrapper.data("idx", intId);
var fName = $("<input type=\"text\" class=\"fieldname\" />");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
$("#preview").click(function() {
$("#yourform").remove();
var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
$("#buildyourform div").each(function() {
var id = "input" + $(this).attr("id").replace("field","");
var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
var input;
switch ($(this).find("select.fieldtype").first().val()) {
case "checkbox":
input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textbox":
input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textarea":
input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
break;
}
fieldSet.append(label);
fieldSet.append(input);
});
$("body").append(fieldSet);
});
});
CSS:
body
{
font-family:Gill Sans MT;
padding:10px;
}
fieldset
{
border: solid 1px #000;
padding:10px;
display:block;
clear:both;
margin:5px 0px;
}
legend
{
padding:0px 10px;
background:black;
color:#FFF;
}
input.add
{
float:right;
}
input.fieldname
{
float:left;
clear:left;
display:block;
margin:5px;
}
select.fieldtype
{
float:left;
display:block;
margin:5px;
}
input.remove
{
float:left;
display:block;
margin:5px;
}
#yourform label
{
float:left;
clear:left;
display:block;
margin:5px;
}
#yourform input, #yourform textarea
{
float:left;
display:block;
margin:5px;
}
这篇关于使用jQuery动态添加/删除输入字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!