jifuning
/
ZHadmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>无刷新添加删除</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../static/css/font.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
		<style type="text/css">
			/* 新增删除图标的样式 */
			
			.layui-form-label {
				width: 100%;
				text-align: left;
			}
			
			.layui-form-label,
			.layui-form-item .layui-input-inline {
				margin-top: 10px;
			}
			
			.yf-input-del .layui-input-inline .layui-input {
				padding-right: 20px;
			}
			
			.yf-input-del .layui-input-inline i.layui-icon {
				position: absolute;
				right: 2px;
				top: 10px;
				color: #999999;
			}
		</style>

	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb">
		        <a href="">首页</a>
		        <a href="">会员管理</a>
		        <a><cite>输入框操作</cite></a>
		    </span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">&#x1002;</i></a>
		</div>
		<div class="weadmin-body">
			<div class="weadmin-block">
				<button class="layui-btn" onclick="insertInput()"><i class="layui-icon"></i>新增1条教育背景</button>
				<span class="fr" style="line-height:40px">共有数据：<i class="numText">88</i> 条</span>
			</div>
			<div class="layui-form-item yf-input-del" id="edu_bg">
				<label class="layui-form-label">教育背景:</label>

				<div class="layui-input-inline" id="insertInput11">
					<input type="text" name="edu_bg[5]" value="" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
					<i class="layui-icon deleteEduBg">&#x1006;</i>
				</div>
				<div class="layui-input-inline" id="insertInput11">
					<input type="text" name="edu_bg[6]" value="" autocomplete="off" placeholder="点击删除图标删除该项输入" lay-verify="required" class="layui-input">
					<i class="layui-icon deleteEduBg">&#x1006;</i>
				</div>
				<div class="layui-input-inline" id="insertInput11">
					<input type="text" name="edu_bg[9]" value="" autocomplete="off" placeholder="点击新增增加新的输入框" lay-verify="required" class="layui-input">
					<i class="layui-icon deleteEduBg">&#x1006;</i>
				</div>
				<div class="layui-input-inline" id="insertInput11">
					<input type="text" name="edu_bg[10]" value="" autocomplete="off" placeholder="name生成判断不重复" lay-verify="required" class="layui-input">
					<i class="layui-icon deleteEduBg">&#x1006;</i>
				</div>
				<div class="layui-input-inline" id="insertInput11">
					<input type="text" name="edu_bg[11]" value="" autocomplete="off" placeholder="避免随意删除新增后产生的name重复问题" lay-verify="required" class="layui-input">
					<i class="layui-icon deleteEduBg">&#x1006;</i>
				</div>
			</div>

		</div>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['element', 'jquery'], function() {
				var element = layui.element,
					$ = layui.jquery;

				var key1 = $("#edu_bg").children(".layui-input-inline").length;
				var FieldCount1 = 0;
				$(function() {
					$(".numText").html(key1);
					console.log("Hello,input输入框随意增加删除，新增时生成的name自动判断是否存在，存在则跳过，避免随意删除新增后提交因为name重复输入值被覆盖。");
				});

				window.insertInput = function() {
					//检索已有的input包含的name值
					var arr1 = [];
					FieldCount1++;
					$("#edu_bg input[type='text']").each(function() {
						arr1.push($(this).attr('name'));

					});
					console.log(arr1);
					//alert(arr1);
					//所有name加入数组alert
					var div1 = $("<div></div>").addClass("layui-input-inline");
					//console.log(edu_bg[FieldCount1]);
					var newCount1 = "edu_bg[" + FieldCount1 + "]";
					//判断新生成的name值是否在已存在的数组中
					if($.inArray(newCount1, arr1) === -1) {
						FieldCount1 = FieldCount1;
						var input1 = "<input type='text' name='edu_bg[" + FieldCount1 + "]' value='' autocomplete='off' placeholder='请输入' lay-verify='required' class='layui-input'>"
						var icon1 = "<i class='layui-icon deleteEduBg'>&#x1006;</i>";
						div1.append(input1, icon1);
						$("#edu_bg").append(div1); // 追加新元素
						key1++;
					} else {
						FieldCount1++;
						insertInput();
					}
					$(".numText").html(key1);

				}
				$("body").on("click", ".deleteEduBg", function(e) { //user click on remove text  
					if(key1 > 1) {
						$(this).parent('div').remove(); //remove text box  
						key1--; //decrement textbox  
					} else {
						alert("请至少填写1条教育背景信息！");
						return false;
					}
					$(".numText").html(key1);

				})

			});
		</script>

	</body>

</html>