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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
javascript中clone对象详解
Dec 03 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
node.js通过url读取文件
Oct 16 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,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python的pstuil模块使用方法总结
2019/07/26 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Python调用JavaScript代码的方法
2020/10/27 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
标记环介质访问控制协议
2016/03/27 面试题
《美丽的田园》教学反思
2014/03/01 职场文书
房屋出租协议书
2014/04/10 职场文书
2014年大学生工作总结
2014/11/20 职场文书
教师创先争优承诺书
2015/04/27 职场文书
新生儿未入户证明
2015/06/23 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
护理工作心得体会
2016/01/22 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript