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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
javascript不可用的问题探究
Oct 01 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
layui导航栏实现代码
May 19 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
php 操作excel文件的方法小结
2009/12/31 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Python网页解析器使用实例详解
2020/05/30 Python
pytorch简介
2020/11/11 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
四年级下册教学反思
2014/02/01 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
MySQL优化之慢日志查询
2022/06/10 MySQL