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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
js下载文件并修改文件名
May 08 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
Vue表单控件绑定图文详解
Feb 11 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
js 作用域和变量详解
2017/02/16 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
10个Python小技巧你值得拥有
2018/09/29 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python检测服务器端口代码实例
2019/08/31 Python
Python是怎样处理json模块的
2020/07/16 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
写给保洁员表扬信
2014/01/08 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android