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 相关文章推荐
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
es5 类与es6中class的区别小结
Nov 09 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的一个基础知识 表单提交
2011/07/04 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
php格式化json函数示例代码
2016/05/12 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
jQuery 解析xml文件
2009/08/09 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
管道维修工岗位职责
2013/12/27 职场文书
爱心捐助倡议书
2014/05/19 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
观看建国大业观后感
2015/06/01 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技