jquery 动态添加输入框的两种方法。
1.展示页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>动态添加输入框</title>
<!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>动态添加输入框</h1>
<div class="container">
<h2>第一种组件封装</h2>
<div class="input-group-add">
</div>
<h2>第二种简单的实现方式</h2>
<div class="input-dyna-add">
</div>
<input type="button" onclick="addInput()" value="添加"/>
<input type="button" onclick="getValue()" value="获取值"/>
</div>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="add.js"></script>
<script>
$(function() {
$(‘.input-group-add‘).initInputGroup({
‘widget‘ : ‘input‘, //输入框组中间的空间类型
/*
‘add‘ : ‘添加‘,
‘del‘ : ‘删除‘,
*/
‘field‘: ‘data‘,
‘data‘ : [‘250‘, ‘300‘, ‘hi‘, ‘dj‘]
});
});
function addInput()
{
var input = $(" <div class=‘input-group form-inline‘><input type=‘text‘ class=‘form-control‘ style=‘width:50%;margin-bottom:2px;‘ name=‘desc[]‘ placeholder=‘请输入名字‘> <input type=‘text‘ name=‘price[]‘ class=‘form-control‘ style=‘width:30%;margin-bottom:2px;‘> <button class=‘removeclass btn btn-default‘ type=‘button‘><span class=‘glyphicon glyphicon-minus‘></span></button></div>‘");
// append 表示添加在标签内， appendTo 表示添加在元素外尾
$(".input-dyna-add").append(input);
}
function getValue() {
var valArr = new Array;
$("input[name=‘desc[]‘]").each(function(index, item){
valArr[index] = $(this).val();
var priv = valArr.join(‘,‘);
alert(priv);
});
// console.log(desc);
}
$("body").on("click",".removeclass", function(e){
// remove text box
$(this).parent(‘div‘).remove();
return false;
})
</script>
</body>
</html>二、js方法
add.js
/**
* Created by DreamBoy on 2016/6/4.
*/
$(function() {
$.fn.initInputGroup = function (options) {
//1.Settings 初始化设置
var c = $.extend({
widget: ‘input‘,
add: "<span class="glyphicon glyphicon-plus"></span>",
del: "<span class="glyphicon glyphicon-minus"></span>",
field: ‘‘,
data: []
}, options);
var _this = $(this);
//添加序号为1的输入框组
addInputGroup(1);
/**
* 添加序号为order的输入框组
* @param order 输入框组的序号
* @param data 初始化输入框组中的数据
*/
function addInputGroup(order) {
//1.创建输入框组
var inputGroup = $("<div class=‘input-group‘ style=‘width:60%;‘ style=‘margin: 10px 0‘></div>");
//2.输入框组的序号
var inputGroupAddon1 = $("<span class=‘input-group-addon‘></span>");
//3.设置输入框组的序号
inputGroupAddon1.html("?" + order + "?");
//4.创建输入框组中的输入控件（input或textarea）
var widget = ‘‘, inputGroupAddon2;
if(c.widget == ‘textarea‘) {
widget = $("<textarea class=‘form-control‘ style=‘resize: vertical;‘></textarea>");
widget.html(c.data[order - 1]);
inputGroupAddon2 = $("<span class=‘input-group-addon‘></span>");
} else if(c.widget == ‘input‘) {
widget = $(" <input type=‘text‘ class=‘form-control‘ style=‘width:40%;margin-bottom:2px;‘ placeholder=‘请输入名字‘> <input class=‘form-control‘ style=‘width:20%;margin-bottom:2px;‘ type=‘text‘/>");
widget.val(c.data[order - 1]);
inputGroupAddon2 = $("<span class=‘input-group-btn‘ style=‘left:20px;‘></span>");
}
//5.设置表单提交时的字段名
if(c.field.length == 0) {
widget.prop(‘name‘, c.widget + ‘Data[]‘);
} else {
widget.prop(‘name‘, c.field + ‘[]‘);
}
//6.创建输入框组中最后面的操作按钮
var addBtn = $("<button class=‘btn btn-default‘ type=‘button‘>" + c.add + "</button>");
addBtn.appendTo(inputGroupAddon2).on(‘click‘, function() {
//7.响应删除和添加操作按钮事件
if($(this).html() == c.del) {
$(this).parents(‘.input-group‘).remove();
} else if($(this).html() == c.add) {
$(this).html(c.del);
addInputGroup(order+1);
}
//8.重新排序输入框组的序号
resort();
});
inputGroup.append().append(widget).append(inputGroupAddon2);
_this.append(inputGroup);
if(order + 1 > c.data.length) {
return;
}
addBtn.trigger(‘click‘);
}
function resort() {
var child = _this.children();
$.each(child, function(i) {
$(this).find(".input-group-addon").eq(0).html(‘?‘ + (i + 1) + ‘?‘);
});
}
}
});相关知识汇总：
我用jquery开发我们前端时，我们用js添加和删除元素是不可避免的。
我总结了一点用jquery添加和删除元素。
添加元素：
例如你需要在<div id="main"></div>中添加元素：
$(‘#main‘).append(‘<p>added</P>‘);删除元素：
第一种情况，删除mian下面的所有子集，但main保留住。
$(‘#main‘).empty();第二种情况，删除main下面的所有子集，包括mian自己。
$(‘#main‘).remove();