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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
JS中的模糊查询功能
Dec 08 Javascript
js实现计算器功能
Aug 10 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
优化PHP程序的方法小结
2012/02/23 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
探究python中open函数的使用
2016/03/01 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python如何保存文本文件
2020/06/07 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
自考生自我鉴定范文
2013/10/01 职场文书
小区推广策划方案
2014/06/06 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
前台岗位职责范本
2015/04/16 职场文书
免职通知
2015/04/23 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
怒海潜将观后感
2015/06/11 职场文书
创业计划书之旅游网站
2019/09/06 职场文书