jquery实现clone

最新推荐文章于 2025-08-19 08:41:01 发布

pingchagnxin007

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery class javascript function input 电话

本文链接：https://blog.youkuaiyun.com/pingchagnxin007/article/details/7818147

本文介绍了一种使用HTML和JavaScript实现动态增删联系人表单的方法，包括姓名、性别等字段，并通过JavaScript实现了功能的封装。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<div id="contact" class="section">
<input type="hidden" id="contactId" name="contactId" />
<p><label>联系人</label><a onclick="deleteDiv(this)" href="javascript:">删除</a></p>
<p>
<label for="contact-2-name">姓名：</label><input maxlength="20" class='cname' type="text" name="contactName" /><i class="required">必填</i>
<label for="contact-2-gender">性别：</label>
<select name="contactGender">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">未知</option>
</select>
</p>
<p>
<label for="contact-2-dpt">部门：</label><input maxlength="100" type="text" name="contactDpt" />
<label for="contact-2-title">岗位：</label><input maxlength="100" type="text" name="contactTitle" />
</p>
<p>
<label for="contact-2-mobile">手机：</label><input maxlength="11" type="text" name="contactMobile" />
<label for="contact-2-phone">电话：</label><input maxlength="15" type="text" name="contactPhone" />
</p>
<p>
<label for="contact-2-msn">MSN：</label><input maxlength="100" type="text" name="contactMsn" />
<label for="contact-2-qq">QQ：</label><input maxlength="15" type="text" name="contactQq" />
</p>
<p>
<label for="contact-2-email">email：</label><input maxlength="400" type="text" name="contactEmail" />
<label for="contact-2-misc">备注：</label><input maxlength="400" type="text" name="contactMisc" />
</p>
</div>

function deleteDiv(obj){
		if(confirm("是否确定要删除?")){
			$(obj).parent().parent().remove();
			var count =  $('#contactCount').val();
			$('#contactCount').val(eval(count-1));
		}
	}

	function addContact(){
		var count =  $('#contactCount').val();//计数器  复制了几个
		var newCount = eval(count)+1//最新的++
		$('#contactCount').val(newCount);// 存储最新的数量
		$('#contact').clone(true).attr("id","contact"+newCount).insertAfter($('#add'));//调整属性值  并添加页面
		
		var inputArr = $('#contact'+newCount+' :input');//获取所有input
		var len = inputArr.length;//动态赋值
		for(var i=0;i<len;i++){
			var name =$(inputArr[i]).attr("name");
			$(inputArr[i]).attr("name",name+newCount)
			$(inputArr[i]).attr("id",name+newCount)
		}
	}