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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
js实现3d悬浮效果
Feb 16 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
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 discuz 主题表和回帖表的设计
2009/03/13 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
利用JS实现数字增长
2016/07/28 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
vue.js表格分页示例
2016/10/18 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python实现俄罗斯方块游戏
2020/03/25 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
Python实现石头剪刀布游戏
2021/01/20 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android