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 相关文章推荐
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
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
global.php
2006/12/09 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
javascript操作数组详解
2014/12/17 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
英语系本科生求职信范文
2013/12/18 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
公民代理授权委托书
2014/09/24 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
2015年电教工作总结
2015/05/26 职场文书