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 面向对象编程  function是方法(函数)
Sep 17 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
Node.js Domain 模块实例详解
Mar 18 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中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python实现tail -f 功能
2020/01/17 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
甜点店创业计划书
2014/01/27 职场文书
入党申请自荐书范文
2014/02/11 职场文书
涨价通知怎么写
2015/04/23 职场文书
初中语文教学反思范文
2016/03/03 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Python制作春联的示例代码
2022/01/22 Python
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android
Python实现聚类K-means算法详解
2022/07/15 Python