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

 更新时间:2013年07月01日 17:37:03   作者:  
这段代码是通过jquery动态增加限定数额的text,以及清除文本内容,用到了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中each()方法用法实例

    jQuery中each()方法用法实例

    这篇文章主要介绍了jQuery中each()方法用法,以实例形式详细分析了each()方法的功能、定义及使用技巧,非常具有实用价值,需要的朋友可以参考下
    2014-12-12
  • jQuery实现三级联动效果

    jQuery实现三级联动效果

    这篇文章主要为大家详细介绍了jQuery实现三级联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • jQuery复制表单元素附源码分享效果演示

    jQuery复制表单元素附源码分享效果演示

    当我们遇到提交表单时,需要我们重复添加好几个表单,在订单表格中添加多个不同型号的产品信息。这个时候有复制表单表单按钮,也就是新增一项,通过点击复制按钮来实现新增一项,怎么实现的呢?下面小编跟大家分享,需要的朋友的朋友可以参考下
    2015-09-09
  • jquery UI 1.72 之datepicker

    jquery UI 1.72 之datepicker

    一步一步学jquery UI 1.72 之datepicker,中间都写了注释方便大家学习。
    2009-12-12
  • jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】

    jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】

    这篇文章主要介绍了jQuery插件FusionCharts绘制的3D双柱状图效果,涉及jQuery使用插件FusionCharts结合xml数据绘制的3D双柱状图的相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • jQuery/$ is not defined报错的几种解决方法

    jQuery/$ is not defined报错的几种解决方法

    jQuery最常见的错误之一是$ is not defined错误,本文主要介绍了jQuery/$ is not defined报错的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • jquery事件与绑定事件

    jquery事件与绑定事件

    本文主要介绍了jquery事件与绑定事件的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • treepanel动态加载数据实现代码

    treepanel动态加载数据实现代码

    本文介绍一个treepanel动态加载数据的例子,需要了解的朋友可以参考下
    2012-12-12
  • jQuery之ajax技术的详细介绍

    jQuery之ajax技术的详细介绍

    本篇文章是对jQuery中的ajax技术进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • jQuery实现表格元素动态创建功能

    jQuery实现表格元素动态创建功能

    这篇文章主要为大家详细介绍了jQuery实现表格元素动态创建功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论