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去空格处理方法
Nov 18 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
vue.js表格分页示例
Oct 18 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
vue-ajax小封装实例
Sep 18 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 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
Sony CFR 320 修复改造
2020/03/14 无线电
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
使用PHP开发留言板功能
2019/11/19 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
消防安全标语
2014/06/07 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
现实表现材料范文
2014/12/23 职场文书
国庆节慰问信
2015/02/15 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
Golang gRPC HTTP协议转换示例
2022/06/16 Golang