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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
js实现下一页页码效果
Mar 07 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
layui use 定义js外部引用函数的方法
Sep 26 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Python中为什么要用self探讨
2015/04/14 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
总经理岗位职责描述
2014/02/08 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
农贸批发市场管理制度
2015/08/07 职场文书