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时ie6和ie7,ff的区别
Aug 19 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
jQuery原生的动画效果
Jul 10 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
javascript实现图片轮换动作方法
Aug 07 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 simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
php strftime函数的详细用法
2018/06/21 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
Python实现屏幕截图的两种方式
2018/02/05 Python
pandas重新生成索引的方法
2018/11/06 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python搜索包的路径的实现方法
2019/07/19 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
售后专员岗位职责
2013/12/08 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
教师个人培训总结
2015/02/11 职场文书
校园新闻稿范文
2015/07/18 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
MySQL创建管理HASH分区
2022/04/13 MySQL