jquery動(dòng)態(tài)增加text元素以及刪除文本內(nèi)容實(shí)例代碼
更新時(shí)間:2013年07月01日 17:37:03 作者:
這段代碼是通過(guò)jquery動(dòng)態(tài)增加限定數(shù)額的text,以及清除文本內(nèi)容,用到了after()方法追加元素,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助
這段代碼是通過(guò)jquery動(dòng)態(tài)增加限定數(shù)額的text(本例為5個(gè)) ,以及清除文本內(nèi)容,用到了after()方法追加元素。
<!--以下為script代碼開(kāi)始-->
<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>
<!--以下為script代碼結(jié)束-->
<!--以下為html代碼塊開(kāi)始-->
<form method='post' id="updateForm" action="admin/vote/doVote">
<table cellpadding=0 cellspacing=0 width="100%" class="table_form">
<tr>
<th width="140">投票名稱(chēng)</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">開(kāi)始時(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>
<!--以下為html代碼塊開(kāi)始-->
以下是運(yùn)行效果:
<!--以下為script代碼開(kāi)始-->
復(fù)制代碼 代碼如下:
<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>
<!--以下為script代碼結(jié)束-->
<!--以下為html代碼塊開(kāi)始-->
復(fù)制代碼 代碼如下:
<form method='post' id="updateForm" action="admin/vote/doVote">
<table cellpadding=0 cellspacing=0 width="100%" class="table_form">
<tr>
<th width="140">投票名稱(chēng)</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">開(kāi)始時(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>
<!--以下為html代碼塊開(kāi)始-->
以下是運(yùn)行效果:

您可能感興趣的文章:
- JQuery獲取與設(shè)置HTML元素的內(nèi)容或文本的實(shí)現(xiàn)代碼
- jQuery 獲取對(duì)象 根據(jù)屬性、內(nèi)容匹配, 還有表單元素匹配
- JQuery中判斷一個(gè)元素下面是否有內(nèi)容或者有某個(gè)標(biāo)簽的判斷代碼
- jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法
- jQuery獲取選中內(nèi)容及設(shè)置元素屬性的方法
- 使用jQuery內(nèi)容過(guò)濾選擇器選擇元素實(shí)例講解
- jQuery給元素添加樣式的方法詳解
- jquery如何判斷某元素是否具備指定的樣式
- Jquery顯示、隱藏元素以及添加刪除樣式
- jquery動(dòng)態(tài)添加帶有樣式的HTML標(biāo)簽元素方法
- JQuery為元素添加樣式的實(shí)現(xiàn)方法
- jQuery操作元素的內(nèi)容和樣式完整實(shí)例分析
相關(guān)文章
jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03jQuery插件FusionCharts繪制的3D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D雙柱狀圖效果,涉及jQuery使用插件FusionCharts結(jié)合x(chóng)ml數(shù)據(jù)繪制的3D雙柱狀圖的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04jQuery/$ is not defined報(bào)錯(cuò)的幾種解決方法
jQuery最常見(jiàn)的錯(cuò)誤之一是$ is not defined錯(cuò)誤,本文主要介紹了jQuery/$ is not defined報(bào)錯(cuò)的幾種解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02treepanel動(dòng)態(tài)加載數(shù)據(jù)實(shí)現(xiàn)代碼
本文介紹一個(gè)treepanel動(dòng)態(tài)加載數(shù)據(jù)的例子,需要了解的朋友可以參考下2012-12-12jQuery之a(chǎn)jax技術(shù)的詳細(xì)介紹
本篇文章是對(duì)jQuery中的ajax技術(shù)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01