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


Posted in Javascript onJuly 01, 2013

这段代码是通过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元素以及删除文本内容实例代码
Javascript 相关文章推荐
javascript new fun的执行过程
Aug 05 Javascript
各种常用的JS函数整理
Oct 25 Javascript
js读写json文件实例代码
Oct 21 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 #Javascript
原生javascript兼容性测试实例
Jul 01 #Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 #Javascript
批量实现面向对象的实例代码
Jul 01 #Javascript
js原生appendChild的bug解决心得分享
Jul 01 #Javascript
Jquery时间验证和转换工具小例子
Jul 01 #Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 #Javascript
You might like
用PHP来写记数器(详细介绍)
2006/10/09 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP session 会话处理函数
2016/06/06 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
Cookie 小记
2010/04/01 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
回门宴父母答谢词
2014/01/26 职场文书
素质拓展感言
2014/01/29 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
初中学校军训方案
2014/05/09 职场文书
家庭教育的心得体会
2014/09/01 职场文书
品德与社会教学反思
2016/02/24 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python