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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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 Hash函数,增强密码安全
2011/02/25 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Django 路由控制的实现
2019/07/17 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
2014年小学安全工作总结
2014/12/04 职场文书
男方婚礼答谢词
2015/01/20 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
python实现股票历史数据可视化分析案例
2021/06/10 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers