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 tab标签页的制作
May 10 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
Vue组件开发技巧总结
Mar 04 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
Vue表单输入绑定的示例代码
Nov 01 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
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php时间戳转换的示例
2014/03/31 PHP
php搜索文件程序分享
2015/10/30 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Python Grid使用和布局详解
2018/06/30 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Django对models里的objects的使用详解
2019/08/17 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python通过实例讲解反射机制
2019/10/17 Python
python识别验证码的思路及解决方案
2020/09/13 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
python单元测试之pytest的使用
2021/06/07 Python
vue使用element-ui按需引入
2022/05/20 Vue.js