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 相关文章推荐
jQuery事件绑定和委托实例
Nov 25 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 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字符串截取函数用法分析
2014/11/25 PHP
YII框架常用技巧总结
2019/04/27 PHP
php文件包含的几种方式总结
2019/09/19 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python中xrange用法分析
2015/04/15 Python
Python生成密码库功能示例
2017/05/23 Python
python机器学习之神经网络(一)
2017/12/20 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
python实现数字炸弹游戏
2020/07/17 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
幼儿园教师辞职信
2014/01/18 职场文书
博士导师推荐信
2015/03/25 职场文书
公司员工奖惩制度
2015/08/04 职场文书
清明节随笔
2015/08/15 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
Python作用域和名称空间的详细介绍
2022/04/13 Python