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 相关文章推荐
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
JavaScript错误处理
Feb 03 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
koa源码中promise的解读
Nov 13 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP7常量数组用法分析
2016/09/26 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
JS的replace方法介绍
2012/10/20 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
js抽奖转盘实现方法分析
2020/05/16 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python File readlines() 使用方法
2018/03/19 Python
django_orm查询性能优化方法
2018/08/20 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
个人求职信范文分享
2013/12/13 职场文书
外贸专业求职信
2014/03/09 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
大学生评语大全
2014/04/18 职场文书
环境卫生倡议书
2014/08/29 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
通知的写法
2015/04/23 职场文书
感恩老师主题班会
2015/08/12 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书