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 相关文章推荐
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 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获取是星期几的的一些常用姿势
2019/12/15 PHP
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
js微信分享实现代码
2020/10/11 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
python实现kmp算法的实例代码
2019/04/03 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python random模块的使用示例
2020/10/10 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Jar包的作用是什么
2014/03/30 面试题
项目总经理岗位职责
2014/02/14 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
对教师的评语
2014/04/28 职场文书
商业融资计划书
2014/04/29 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
刑事上诉状范文
2015/05/22 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python