欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery动态增加text元素以及删除文本内容实例代码

程序员文章站 2022-11-21 21:33:45
这段代码是通过jquery动态增加限定数额的text(本例为5个) ,以及清除文本内容,用到了after()方法追加元素。 . 代码如下: &...

这段代码是通过jquery动态增加限定数额的text(本例为5个) ,以及清除文本内容,用到了after()方法追加元素。
<!--以下为script代码开始-->

. 代码如下:


<script>
$(document).ready(function(){
var spotmax = 5;//限定添加text元素的总个数
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("");//清空文本内容
});
</script>


<!--以下为script代码结束-->
<!--以下为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">结束时间</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动态增加text元素以及删除文本内容实例代码