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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
jquery获取tagName再进行判断
May 29 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 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
mayfish 数据入库验证代码
2010/04/30 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
List Installed Software Features
2007/06/11 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
vue实现留言板todolist功能
2017/08/16 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Python 常用 PEP8 编码规范详解
2017/01/22 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
django Serializer序列化使用方法详解
2018/10/16 Python
基于python实现名片管理系统
2018/11/30 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python转换时间的图文方法
2019/07/01 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
安全检查验收制度
2014/01/12 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
党课主持词大全
2015/06/30 职场文书
七年级英语教学反思
2016/02/15 职场文书
MySQL索引失效场景及解决方案
2022/07/23 MySQL