jQuery實現(xiàn)動態(tài)添加和刪除input框代碼實例
更新時間:2019年03月29日 11:58:09 作者:賴木子
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加和刪除input框,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文實例為大家分享了jQuery實現(xiàn)動態(tài)添加和刪除input框的具體代碼,供大家參考,具體內(nèi)容如下
<!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{// 提示選項個數(shù)已經(jīng)達到最大
$("#optips").html("選項個數(shù)已經(jīng)達到最大,不能再添加!");
$("#optips").css({"color":"red"});
}
});
// 刪除選項
$("#delbtn").click(function(){
if($("#opts>li").size() <= 0){
$("#optips").html("已經(jīng)沒有選項可以刪除了!");
$("#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實現(xiàn)動態(tài)添加和刪除input框,詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
您可能感興趣的文章:
- jQuery ajax仿Google自動提示SearchSuggess功能示例
- JQueryDOM之樣式操作
- 淺談JS和jQuery的區(qū)別
- jQuery實現(xiàn)動態(tài)添加和刪除input框?qū)嵗a
- jQuery添加新內(nèi)容的四個常用方法分析【append,prepend,after,before】
- 簡單易擴展可控性強的Jquery轉(zhuǎn)盤抽獎程序
- 詳解jQuery-each()方法
- 使用jquery的cookie實現(xiàn)登錄頁記住用戶名和密碼的方法
- Jquery的autocomplete插件用法及參數(shù)講解
- jQuery事件blur()方法的使用實例講解
相關(guān)文章
解決jquery操作checkbox火狐下第二次無法勾選問題
在工作中使用jquery操作checkbox,進行全選、反選,現(xiàn)在的問題是火狐下第二次無法勾選問題,在下面有個詳細的解答,感興趣的朋友可以參考下2014-02-02
jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時我們希望刪除這段html代碼里面的一對<p>標(biāo)簽,但是要保持里面的內(nèi)容不被刪除,本文提供的這個jquery方法就可以簡單實現(xiàn)。2014-04-04
Jquery 動態(tài)循環(huán)輸出表格具體方法
這篇文章主要介紹了Jquery 動態(tài)循環(huán)輸出表格具體方法,有需要的朋友可以參考一下2013-11-11
jQuery)擴展jQuery系列之一 模擬alert,confirm(一)
很多人都為了使alert系統(tǒng)的調(diào)用函數(shù)在自己的控制范圍之內(nèi),都選擇了去封裝一個屬于自己的alert組件,現(xiàn)在我們就動手實現(xiàn)一個這樣的小部件。2010-12-12

