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 相关文章推荐
JS字符串函数扩展代码
Sep 13 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
Discuz 模板引擎的封装类代码
2008/07/18 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
解析php取整的几种方式
2013/06/25 PHP
php自动加载方式集合
2016/04/04 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
微信小程序 聊天室简单实现
2017/04/19 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
解决Python requests 报错方法集锦
2017/03/19 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
解决pip install psycopg2出错问题
2020/07/09 Python
Python实现京东抢秒杀功能
2021/01/25 Python
python在协程中增加任务实例操作
2021/02/28 Python
英国医生在线预约:Top Doctors
2019/10/30 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
物流创业计划书
2014/02/01 职场文书
集体婚礼策划方案
2014/02/22 职场文书
责任书范本
2014/08/25 职场文书
倡议书格式
2014/08/30 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
2016小学新学期寄语
2015/12/04 职场文书