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 相关文章推荐
js格式化货币数据实现代码
Sep 04 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 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的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
javascript读取xml
2006/11/04 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python妹子图简单爬虫实例
2015/07/07 Python
python Django批量导入不重复数据
2016/03/25 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
工作评语大全
2014/04/26 职场文书
文明寝室标语
2014/06/13 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
解析redis hash应用场景和常用命令
2021/08/04 Redis