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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
js select option对象小结
2013/12/20 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
JS异步函数队列功能实例分析
2017/11/28 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
幼儿园元旦家长感言
2014/02/27 职场文书
总经理任命书
2014/03/29 职场文书
学期个人自我总结
2015/02/13 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL