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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
Vue实现简单的留言板
Oct 23 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实现字符串反转输出的方法
2015/03/14 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
python 合并文件的具体实例
2013/08/08 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python多任务之协程的使用详解
2019/08/26 Python
wxPython实现文本框基础组件
2019/11/18 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
python网络编程之五子棋游戏
2020/05/14 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
生日派对邀请函
2014/01/13 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
台风停课通知
2015/04/24 职场文书