bootstrap dynamic inputGroup

最新推荐文章于 2024-06-13 11:37:32 发布

妙明元心

最新推荐文章于 2024-06-13 11:37:32 发布

阅读量144

点赞数

分类专栏： H5、CSS

本文链接：https://blog.youkuaiyun.com/beihenanfei/article/details/118512396

版权

H5、CSS 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		 crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
		 crossorigin="anonymous"></script>
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="input-group-add">
			</div>

			<button type="button" class="btn btn-primary" id="testV">获取input数组</button>
		</div>
		<script>
			$('#testV').click(function() {
				var arr = [];
				$("input[name='data[]']").each(function() {
					arr.push($(this).val());
				})
				console.log(arr);
			});


			$(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='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 class='form-control' type='text'/>");
							widget.val(c.data[order - 1]);
							inputGroupAddon2 = $("<span class='input-group-btn'></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(inputGroupAddon1).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) + ' ');
						});
					}
				}
			});



			$(function() {
				$('.input-group-add').initInputGroup({
					'widget': 'input', //输入框组中间的空间类型
					// 'add' : '添加',
					// 'del' : '删除',
					'field': 'data',
					'data': ['haha', 'hello', 'hi', 'dj']
				});
			});
		</script>

	</body>
</html>