jQuery实现在列表的首行添加数据


Posted in Javascript onMay 19, 2015

jQuery中可以通过append在列表的最后添加数据,也可以通过prepend在列表的最前面添加数据

方法很简单:

jQuery('#comment_list').prepend('<li>hello 3water.com</li>');

另外附上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中;

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript自定义事件介绍
Aug 29 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
jQuery中 prop() attr()使用详解
May 19 #Javascript
javascript实现获取服务器时间
May 19 #Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 #Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 #Javascript
7个有用的jQuery代码片段分享
May 19 #Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 #Javascript
javascript检测两个数组是否相似
May 19 #Javascript
You might like
php 删除数组元素
2009/01/16 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
详解React 条件渲染
2020/07/08 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python双向链表实现实例代码
2013/11/21 Python
python文件的md5加密方法
2016/04/06 Python
python实现根据文件格式分类
2019/10/31 Python
django ORM之values和annotate使用详解
2020/05/19 Python
浅谈Python协程
2020/06/17 Python
python Selenium 库的使用技巧
2020/10/16 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
求职意向书
2014/04/01 职场文书
毕业生就业协议书
2014/04/11 职场文书
我爱读书演讲稿
2014/05/07 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
房产电话营销开场白
2015/05/29 职场文书