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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
图解JavaScript中的this关键字
May 28 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
在vue里使用codemirror遇到的问题
Nov 01 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 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中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Php多进程实现代码
2018/05/07 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
大学生活学习的自我评价
2013/12/03 职场文书
四风存在的原因分析
2014/02/11 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis