Jquery实现点击按钮,连续地向textarea中添加值的实例代码


Posted in Javascript onMarch 08, 2014

代码如下:

<%@ page language="java" contentType="text/html; charset=gbk"
    pageEncoding="gbk"%>
    <%@ include file="/pages/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
        $("input[id^='buttonValidate']").click(function(){  //当点击所有的id中包含'buttonValidate'的input标签时,执行函数
         var btnVal=$.trim($(this).val());//trim函数,去掉空格
         var str = $('#textareaValidate').val() + btnVal;//
         $('#textareaValidate').val(str);//
        });
   });
</script>
<title>Insert title here</title>
</head>
<body>
<form  id="form1" name="form1" action="" method="post">
<table  id ="table1" class="base_table" cellspacing="0"  border="1" style="border-collapse: collapse">
 <tr>
  <td >
  <textarea cols="75" rows="5" id="textareaValidate"></textarea>
  </td>
 </tr>
 <tr id="tr1">
  <td>
  <input id="buttonValidate1" type="button" value=" + "/> 
  <input id="buttonValidate2" type="button" value=" - "/> 
  <input id="buttonValidate3" type="button" value=" * "/>
  <input id="buttonValidate4" type="button" value=" / "/>     
  <input id="buttonValidate5" type="button" value=" ! "/>
  <input id="buttonValidate6" type="button" value=" = "/>
  <input id="buttonValidate7" type="button" value=" < "/>
  <input id="buttonValidate8" type="button" value=" > "/>      
  <input id="buttonValidate9" type="button" value=" & "/>
  <input id="buttonValidate10" type="button" value=" | "/>
  <input id="buttonValidate11" type="button" value=" ( "/>
  <input id="buttonValidate12" type="button" value=" ) "/>
  </td>
 </tr>
</table>
</form>
</body>
</html>

以上实现的功能:点击+,则把+添加到textarea中,点击-,则把-添加到textarea中;

如图:
Jquery实现点击按钮,连续地向textarea中添加值的实例代码

Javascript 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Vue项目全局配置微信分享思路详解
May 04 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 #Javascript
JS实现鼠标单击与双击事件共存
Mar 08 #Javascript
js触发onchange事件的方法说明
Mar 08 #Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 #Javascript
javascript中的事件代理初探
Mar 08 #Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 #Javascript
Extjs表单常见验证小结
Mar 07 #Javascript
You might like
php简单的会话类代码
2011/08/08 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
python对execl 处理操作代码
2020/06/22 Python
is_file和file_exists效率比较
2021/03/14 PHP
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
运动员加油词
2015/07/18 职场文书
大学校园招聘会感想
2015/08/10 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫