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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 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实现打包下载文件的方法示例
2017/10/07 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
详解javascript void(0)
2020/07/13 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python中split方法用法分析
2015/04/17 Python
Python实现截屏的函数
2015/07/25 Python
Python 探针的实现原理
2016/04/23 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python hashlib模块加密过程解析
2019/11/05 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
怎样在程序里获得一个空指针
2015/01/24 面试题
学生干部的自我评价分享
2014/01/18 职场文书
年终考核评语
2014/01/19 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
班主任寄语2015
2015/02/26 职场文书
辞职信的写法
2015/02/27 职场文书
小学体育组工作总结
2015/08/13 职场文书