Jquery实现点击按钮,连续地向textarea中添加值的实例代码


代码如下:

复制代码 代码如下:

<%@ 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中;

如图:



相关阅读:
PHP中error_reporting()用法详解
Android中Glide加载库的图片缓存配置究极指南
如何调试报表插件
Js可拖拽放大的层拖动特效实现方法
基于JavaScript实现div层跟随滚动条滑动
ASP.NET MVC5网站开发之用户资料的修改和删除3(七)
php构造函数与析构函数
CSS复合选择器使用介绍
php抓取网站图片并保存的实现方法
JavaScript中实现异步编程模式的4种方法
sql server 入门语句总结
mysql(master/slave)主从复制原理及配置图文详解
table对象中的insertRow与deleteRow使用示例
Linux下用于对比文件的diff命令使用教程
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 韩翃《宿石邑山中》诗歌鉴赏 春天的喜悦 小学五年级作文1200字:花瓣 挫折的人生作文 杂言(五) 成长的向日葵 教师年度个人工作总结_个人工作总结 和谐校园手抄报内容 小年贴心祝福语 我在哭泣中忘记你 盘坐 行走的力量 在春季学生军训结业典礼上的讲话 江泽民文选的党课教育材料 学习方法的名言警句 悠悠风来 小学五年级作文750字:我是一只蝴蝶 食药监局党的群众路线总结大会材料汇报 “开学典礼”是我的新征程--开学典礼感言 简美 梦回江南 作文800字 审计局学习贯彻两学一做实施方案 公司经理2016新年致辞 作文蚂蚁的村落500字 奶奶说漏了 窗台印记 他是位性格倔强的人 山居笔记读后感1000字 初吻…… 刘长卿《过贾谊宅》唐诗鉴赏 2014年旅行社导游实习报告范文 秋天の萤火虫发表日志:qq头像代表的意义 世界哮喘日的由来 听《东方之珠》有感_听课心得 熟悉的地方,有风景作文500字 幻想的人 班组长表态发言 25岁以后,被生活打过的32个耳光 迎“六一”作文400字 违纪通报批评范文 长大后,我就成了你 游鱼的叹息 小学四年级作文350字:新世纪的动物园 生物技术求职面试的自我介绍 擦肩过,故人似路人 初中初一作文650字:090605周记 《梦》 2 2015党委书记工作述职报告 跌倒作文800字 关于创建学习型村镇实施方案 【原创】心里有座坟,葬着未亡人

Copyright © 2016 phpStudy |