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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
javascript一点特殊用法
May 28 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
javascript函数特点实例分析
May 14 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
html实现随机点名器的示例代码
Apr 02 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
php无序树实现方法
2015/07/28 PHP
List Installed Hot Fixes
2007/06/12 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
Python 初始化多维数组代码
2008/09/06 Python
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python读取网页内容的方法
2015/07/30 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python File readlines() 使用方法
2018/03/19 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
入党介绍人评语
2014/05/06 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
师德师风整改措施
2014/10/24 职场文书
收入证明范本
2015/06/12 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
七年级作文之游记
2019/12/11 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
Vue vee-validate插件的简单使用
2021/06/22 Vue.js