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 相关文章推荐
在JavaScript中typeof的用途介绍
Apr 11 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
vue+canvas实现移动端手写签名
May 21 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
再谈javascript原型继承
2014/11/10 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
详解如何运行vue项目
2019/04/15 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
wxpython绘制圆角窗体
2019/11/18 Python
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
档案接收函格式
2015/01/30 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
第二次离婚起诉书
2015/05/18 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
关于感恩的作文
2019/08/26 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL