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 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
详解JavaScript作用域 闭包
Jul 29 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
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
回顾Javascript React基础
2019/06/15 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
python条件和循环的使用方法
2013/11/01 Python
Python简单的制作图片验证码实例
2017/05/31 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
python RSA加密的示例
2020/12/09 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
文化建设工作方案
2014/05/12 职场文书
护理专业自荐书
2014/06/04 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
审美与表现自我评价
2015/03/09 职场文书
学校社团活动总结
2015/05/07 职场文书
实用求职信模板范文
2019/05/13 职场文书