jQuery 동적 추가 및 input 상자 코드 인 스 턴 스 삭제

2274 단어 jQuery입력 상자
본 논문 의 사례 는 jQuery 가 동적 으로 input 상자 의 구체 적 인 코드 를 추가 하고 삭제 하 는 것 을 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>  </title>
 
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 
<script>
	$(function(){
		//     
		$("#opbtn").click(function(){
			if($("#opts>li").size() < 6){//     6   
				$("#opts").append("<li><input /></li>");
			}else{//             
				$("#optips").html("          ,     !");
				$("#optips").css({"color":"red"});
			}
			
		});
		
		//     
		$("#delbtn").click(function(){
			if($("#opts>li").size() <= 0){
				$("#optips").html("           !");
				$("#optips").css({"color":"red"});
			} else{
				//     ,        
				$("#opts>li").last().remove();
			}
			
		});
		
		
		
	});
 
</script>
 
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	
	#dv{
		width: 100px;
		height: 100px;
		background-color: yellow;
		margin: 0px auto 0px;
	}
	
</style>
</head>
<body>
	<div style="margin: 50px;">
		<input id="opbtn" type="button" value="    "/>
		<input id="delbtn" type="button" value="    "/>
		<input id="wrapbtn" type="button" value="  DIV"/>
		<ol id="opts" type="A"></ol>
		
		<!--     -->
		<span id="optips"></span>
	</div>
	
	
</body>
</html>
 
위 에서 말 한 것 은 소 편 이 소개 한 jQuery 가 동적 추가 와 input 상 자 를 삭제 하고 상세 하 게 통합 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기