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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 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配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
smarty自定义函数用法示例
2016/05/20 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
javascript数组去重小结
2016/03/07 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Python多图片合并PDF的方法
2019/01/03 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
生产部主管岗位职责
2014/01/06 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
品质标语大全
2014/06/21 职场文书
创先争优演讲稿
2014/09/15 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
python 爬取天气网卫星图片
2021/06/07 Python