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 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 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命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python中super关键字用法实例分析
2015/05/28 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python3实现单目标粒子群算法
2019/11/14 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
医学生实习自荐信
2013/10/01 职场文书
社区春季防火方案
2014/06/02 职场文书
高中数学教学反思范文
2016/02/18 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
MySQL 如何分析查询性能
2021/05/12 MySQL
python常见的占位符总结及用法
2021/07/02 Python
mysql创建存储过程及函数详解
2021/12/04 MySQL
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python