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 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
Angular5.1新功能分享
Dec 21 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
vuex分模块后,实现获取state的值
Jul 26 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去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python2 与python3的print区别小结
2018/01/16 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
python制作抖音代码舞
2019/04/07 Python
详解python变量与数据类型
2020/08/25 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
物流专员岗位职责
2014/02/17 职场文书
洗发露广告词
2014/03/14 职场文书
教师考核材料
2014/05/21 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
迎国庆演讲稿
2014/09/05 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
党员违纪检讨书
2015/05/05 职场文书
环保守法证明
2015/06/24 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技