jquery動態(tài)增加text元素以及刪除文本內(nèi)容實例代碼
更新時間:2013年07月01日 17:37:03 作者:
這段代碼是通過jquery動態(tài)增加限定數(shù)額的text,以及清除文本內(nèi)容,用到了after()方法追加元素,具體實現(xiàn)如下,感興趣的朋友可以參考下哈,希望對大家有所幫助
這段代碼是通過jquery動態(tài)增加限定數(shù)額的text(本例為5個) ,以及清除文本內(nèi)容,用到了after()方法追加元素。
<!--以下為script代碼開始-->
<script>
$(document).ready(function(){
var spotMax = 5;//限定添加text元素的總個數(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);
});
});
//添加選項方法
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項投票!");
}
};
//重置選項
$("input#btnResetOption").click(function(){
$(":text[id^='txtInput_']").val("");//清空文本內(nèi)容
});
</script>
<!--以下為script代碼結(jié)束-->
<!--以下為html代碼塊開始-->
<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">開始時間</th>
<td>
<input type="text" id="dateMin" class="input-text" value="" name="startDate" size="40" readonly="readonly"/>
</td>
</tr>
<tr>
<th width="140">結(jié)束時間</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">投票選項</th>
<td>
<input type="button" id="btnAddOption" name="btnAddOption" class="button" value="添加選項"/>
<input type="reset" id="btnResetOption" name="btnResetOption" class="button" value="重置選項"/>
</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代碼塊開始-->
以下是運行效果:
<!--以下為script代碼開始-->
復(fù)制代碼 代碼如下:
<script>
$(document).ready(function(){
var spotMax = 5;//限定添加text元素的總個數(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);
});
});
//添加選項方法
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項投票!");
}
};
//重置選項
$("input#btnResetOption").click(function(){
$(":text[id^='txtInput_']").val("");//清空文本內(nèi)容
});
</script>
<!--以下為script代碼結(jié)束-->
<!--以下為html代碼塊開始-->
復(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">開始時間</th>
<td>
<input type="text" id="dateMin" class="input-text" value="" name="startDate" size="40" readonly="readonly"/>
</td>
</tr>
<tr>
<th width="140">結(jié)束時間</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">投票選項</th>
<td>
<input type="button" id="btnAddOption" name="btnAddOption" class="button" value="添加選項"/>
<input type="reset" id="btnResetOption" name="btnResetOption" class="button" value="重置選項"/>
</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代碼塊開始-->
以下是運行效果:

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