jquery動(dòng)態(tài)增加text元素以及刪除文本內(nèi)容實(shí)例代碼

更新時(shí)間：2013年07月01日 17:37:03 作者：

這段代碼是通過jquery動(dòng)態(tài)增加限定數(shù)額的text，以及清除文本內(nèi)容，用到了after()方法追加元素，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助

這段代碼是通過jquery動(dòng)態(tài)增加限定數(shù)額的text（本例為5個(gè)），以及清除文本內(nèi)容，用到了after()方法追加元素。

 
<script> 
$(document).ready(function(){ 
var spotMax = 5;//限定添加text元素的總個(gè)數(shù) 
var afterId = 0;//要追加元素的id 
var newId=1;//新生成text的id 
if($('table#vote').size() >= spotMax) {} 
$("#btnAddOption").click(function(){ 
afterId++; 
newId=afterId+1; 
addSpot(this, spotMax,afterId,newId); 
}); 
}); 
//添加選項(xiàng)方法 
function addSpot(obj, sm,afterId,newId) { 
if($('tr.spot').size() < sm){ 
$('#vote_'+afterId).after( 
'<tr id="vote_'+newId+'" class="spot"><th>'+afterId+'</th>' + 
'<td><input type="text" id="txtInput_'+afterId+'" class="input-text" value="" size="40" name="names" /></td> ' + 
'</tr>'); 
$(":text[id^='txtInput_']").val("輸入文本...");//給新增的文本賦予初始值 
} 
else{ 
alert("最多只能添加5項(xiàng)投票！"); 
} 
}; 
//重置選項(xiàng) 
$("input#btnResetOption").click(function(){ 
$(":text[id^='txtInput_']").val("");//清空文本內(nèi)容 
}); 
</script> 

復(fù)制代碼代碼如下:

 
<form method='post' id="updateForm" action="admin/vote/doVote"> 
<table cellpadding=0 cellspacing=0 width="100%" class="table_form"> 
<tr> 
<th width="140">投票名稱</th> 
<td> 
<input type="text" id="txtName" name="name" class="input-text" value="" size="85"/> 
</td> 
</tr> 
<tr> 
<th width="140">投票描述</th> 
<td> 
<textarea id="txtDescribe" class="input-text" name="remark" cols="85" ></textarea> 
</td> 
</tr> 
<tr> 
<th width="140">開始時(shí)間</th> 
<td> 
<input type="text" id="dateMin" class="input-text" value="" name="startDate" size="40" readonly="readonly"/> 
</td> 
</tr> 
<tr> 
<th width="140">結(jié)束時(shí)間</th> 
<td> 
<input type="text" id="dateMax" class="input-text" name="endDate" size="40" readonly="readonly"/> 
</td> 
</tr> 
<tr> 
<th width="140">是否多選</th> 
<td> 
<input type="radio" id="txtEndTime" name="isSelect" value="0" size="40"/>單選 
<input type="radio" id="txtEndTime" name="isSelect" value="1" size="40"/>多選 
</td> 
</tr> 
<tr id="vote_1"> 
<th width="140">投票選項(xiàng)</th> 
<td> 
<input type="button" id="btnAddOption" name="btnAddOption" class="button" value="添加選項(xiàng)"/> 
<input type="reset" id="btnResetOption" name="btnResetOption" class="button" value="重置選項(xiàng)"/> 
</td> 
</tr> 
<tr id="save"> 
<th></th> 
<td align="left"> 
<input type="submit" id="btnSave" name="btnSave" class="button" style="width:50px" value="保存"/> 
<input type="submit" id="btnClose" name="btnClose" class="button" style="width:50px" value="取消"/> 
</td> 
</tr> 
</table> 
</form> 