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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
Vue实现双向数据绑定
May 03 Javascript
详解原生js实现offset方法
Jun 15 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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
农民C键的运用技巧
2020/03/04 星际争霸
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php实现简单的上传进度条
2015/11/17 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
Python的Django框架中的Context使用
2015/07/15 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
关于幼儿的自我评价
2013/12/18 职场文书
领导检查欢迎词
2014/01/14 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
三八妇女节慰问信
2015/02/14 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers