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 14 Javascript
JS重要知识点小结
Nov 06 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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设计模式之责任链模式的深入解析
2013/06/13 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python 的topk算法实例
2020/04/02 Python
如何通过python计算圆周率PI
2020/11/11 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
管理标语大全
2014/06/24 职场文书
民主生活会剖析材料
2014/09/30 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
入党转正介绍人意见
2015/06/03 职场文书
英雄儿女观后感
2015/06/09 职场文书
医德医风学习心得体会
2016/01/25 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL