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 相关文章推荐
图片之间的切换
Jun 26 Javascript
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
js实现自定义右键菜单
May 18 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
基于initPHP的框架介绍
2013/04/18 PHP
定义php常量的详解
2013/06/09 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
JS中操作JSON总结
2020/12/06 Javascript
javascript类型转换示例
2014/04/29 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
js实现漫天星星效果
2017/01/19 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
详解Python中find()方法的使用
2015/05/18 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
Python实现多进程的四种方式
2019/02/22 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
立春观后感
2015/06/18 职场文书
如何写新闻稿
2015/07/18 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA