JS 排序输出实现table行号自增前端动态生成的tr

 更新时间:2014年08月13日 17:08:33   投稿:whsnow  
一个项目,需要对数据进行排序输出,要求有行号,依次递增1.2.3.4.5,使用前端动态生成的tr

最近做一项目,需要对数据进行排序输出,要求有行号,依次递增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进阶(四)原型与原型链用法实例分析

    这篇文章主要介绍了JavaScript原型与原型链,结合实例形式分析了JavaScript原型与原型链基本概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-05-05
  • JavaScript之创意时钟项目(实例讲解)

    JavaScript之创意时钟项目(实例讲解)

    下面小编就为大家带来一篇JavaScript之创意时钟项目。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JavaScript实现秒杀时钟倒计时

    JavaScript实现秒杀时钟倒计时

    这篇文章主要为大家详细介绍了JavaScript实现秒杀时钟倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JavaScript 程序循环结构详解

    JavaScript 程序循环结构详解

    这篇文章主要为大家介绍了JavaScript 程序循环结构,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 浅谈javascript六种数据类型以及特殊注意点

    浅谈javascript六种数据类型以及特殊注意点

    这篇文章主要介绍了javascript六种数据类型以及特殊注意点,有需要的朋友可以参考一下
    2013-12-12
  • Bootstrap Chart组件使用教程

    Bootstrap Chart组件使用教程

    图表组件Chart.js是Bootstrap比较好用的组件之一,与一款收费的组件highchart类似,效果上来看免费与收费的产品相差还是有一点点的,不过功能上差不多能满足我们项目的需要,本文给大家介绍Bootstrap Chart组件使用,需要的朋友参考下吧
    2016-04-04
  • JavaScript给数组添加元素的6个方法

    JavaScript给数组添加元素的6个方法

    本文主要介绍了JavaScript给数组添加元素的6个方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • JS+CSS实现仿msn风格选项卡效果代码

    JS+CSS实现仿msn风格选项卡效果代码

    这篇文章主要介绍了JS+CSS实现仿msn风格选项卡效果代码,涉及JavaScript响应鼠标事件动态变换页面元素css样式实现切换功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 微信小程序获取手机验证码的方法

    微信小程序获取手机验证码的方法

    这篇文章主要为大家详细介绍了微信小程序获取手机验证码的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 微信小程序实现弹出输入框代码实例

    微信小程序实现弹出输入框代码实例

    最近在写一个微信小程序,有一个需求是点击一个按钮后,出现一个输入框,然后根据用户的输入再进行操作,所以这篇文章主要给大家介绍了关于微信小程序实现弹出输入框的相关资料,需要的朋友可以参考下
    2023-09-09

最新评论