JS 排序输出实现table行号自增前端动态生成的tr


Posted in Javascript onAugust 13, 2014

最近做一项目,需要对数据进行排序输出,要求有行号,依次递增1.2.3.4.5.......。

前端通过<c:forEach> 遍历动态输出的<tr>,代码如下:

<!-- 循环生成,列表数据 --> 
<c:forEach items="${pager.list}" var="auction"> 
<tr class="bg1"> 
<td width="10" align="center"><span class="numberClass"></span></td> 
<td width="30" align="center">${auction.dept}</td> 
<td width="40" align="center">${auction.donor}</td> 
<td width="40" align="center">¥:${auction.auctionSum}.00</td> 
<td width="40" align="center"><span onClick="displayDetails('xxxx}')" style="color:blue;cursor:pointer;">查看详细信息</span></td> 
</tr> 
</c:forEach>

行号自增js代码(需引入jquery):

$(function(){ 
function number(){ 
for(var i=0;i< $(".numberClass").length;i++){ 
$(".numberClass").get(i).innerHTML = i+1; 
} 
} 
number(); 
});
Javascript 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 #Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 #Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 #Javascript
用javascript读取xml文件读取节点数据
Aug 12 #Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 #Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 #Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 #Javascript
You might like
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
JS获取html对象的几种方式介绍
2013/12/05 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
Vue.use源码分析
2017/04/22 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python输出9*9乘法表的方法
2015/05/25 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
软件测试笔试题
2012/10/25 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
初一家长会邀请函
2014/01/31 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
公司仓库管理制度
2015/08/04 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
Nginx动静分离配置实现与说明
2022/04/07 Servers