JS 排序输出实现table行号自增前端动态生成的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();
});
赞 (0)

相关推荐

  • JS给Textarea文本框添加行号的方法

    JS给Textarea文本框添加行号的方法

    本文实例讲述了JS给Textarea文本框添加行号的方法.分享给大家供大家参考.具体如下: 这里使用JS实现让Textarea文本框显示行号的功能,每一行的前面都会有下数字序号,如果用来显示代码的话,可以直接找到某一行,如果不显示行号,则还要自己手功去查,想要此功能,你只需设置好TextArea ID,并加入代码中的JavaScript代码部分即可,文本框的长宽则是由CSS来控制的,你可试着修改一下,长宽的显示要与JS相匹配. 运行效果截图如下: 在线演示地址如下: http://demo.jb

  • .net开发:为程式码加上行号的方法详解

    Abstract若需要将程式码放进word交报告或做文件时,或许我们会想将程式码加上行号方便讲解,如同博客园显示程式码那样,我们该如何做呢? Introduction 使用环境:Visual C++ 9.0 / Visual Studio 2008 一段C++的小程式,可以帮程式码加上行号后输出. 以下为引用的内容:map_code_line.cpp / C++ 复制代码 代码如下: /*         (C) OOMusou 2008 Filename    : map_code_line.

  • pycharm 使用心得（四）显示行号

    pycharm 使用心得（四）显示行号

    在PyCharm 里,显示行号有两种办法: 1,临时设置.右键单击行号处,选择 Show Line Numbers. 但是这种方法,只对一个文件有效,并且,重启PyCharm 后消失. 2,永久设置.File --> Settings -->Editor -->Appearance ,  之后勾选Show Line Numbers.

  • JavaScript获取GridView中用户点击控件的行号，列号

    复制代码 代码如下: <asp:ImageButton ID="BtnMailaddress" runat="server" ImageUrl="../img/Search.gif" ImageAlign="Top" TabIndex="0" OnClientClick = "javascript:openImage(this);return false;"/> functi

  • DataGridView控件显示行号的正确代码及分析

    前些天在写个小程序,用到DataGridView,想给它动态的显示行号.不是很费劲GOOGLE了一下,这GOOGLE不要紧,发现了不少问题.以下基本上都是GOOGLE搜索出来的网上的一些解决方法,千篇一律都是这样的: 复制代码 代码如下: private void DataGridView1_RowsAdded(object sender, DataGridViewRowsAddedEventArgs e)         { for (int i = 0; i < e.RowCount; i+

  • asp.net利用NamingContainer属性获取GridView行号的方法

    由于DropDoweList与button不同,无法指定其CommandName,所以,也就没办法通过常规的方法捕获所在行的索引.颇费了些周折,后来找到用NamingContainer属性解决了问题.先来看看微软对该属性的解释:----------------------------------获取对服务器控件的命名容器的引用,此引用创建唯一的命名空间,以区分具有相同 Control.ID 属性值的服务器控件. ASP.NET Web 应用程序的每一页均包含控件的层次结构.此层次结构与控件是否生

  • js行号显示的文本框实现效果(兼容多种浏览器 )

    js行号显示的文本框实现效果(兼容多种浏览器 )

    利用js打造的一个非常实用简易的文本编辑框,可以显示行号并且同时兼容ie和firefox等主流浏览器,如下效果图: 以下是该效果的源码: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>显示行号的文本框效果,兼容ie.火狐等浏览器</title> <style type=&q

  • Python实现去除代码前行号的方法

    本文实例讲述了Python实现去除代码前行号的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: # -*- coding: utf-8 -*- import wx class MainWindow(wx.Frame):     def __init__(self, parent, id):         wx.Frame.__init__(self, parent, id,         u'去除代码前行号的Python小工具 - wxPython版 - Develop

  • 显示行号的文本输入框

    DirMap * { font-size: 12px } body { margin: 10px; padding: 0px } A { COLOR: black; TEXT-DECORATION: none; } A:hover { COLOR: black; TEXT-DECORATION: none; } A:link { TEXT-DECORATION: none } A:visited { TEXT-DECORATION: none } table.list{ cursor: defa

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

    最近做一项目,需要对数据进行排序输出,要求有行号,依次递增1.2.3.4.5........ 前端通过<c:forEach> 遍历动态输出的<tr>,代码如下: <!-- 循环生成,列表数据 --> <c:forEach items="${pager.list}" var="auction"> <tr class="bg1"> <td width="10" al

  • JS库 Highlightjs 添加代码行号的实现代码

    Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式. 然而,Highlightjs默认是不包括显示代码行号(Line Number)这一特性的,不过可以通过简单的JS代码和CSS样式表实现对Highlightjs的行号显示功能. 参考博文链接: syntax-highlighting-with-highlightjs Javascript代码: //numbering for pre>code blocks $(function(){ $('pr

  • jQuery实现获取table中鼠标click点击位置行号与列号的方法

    jQuery实现获取table中鼠标click点击位置行号与列号的方法

    本文实例讲述了jQuery实现获取table中鼠标click点击位置行号与列号的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 鼠标点击位置行列号</title> </head> <bo

  • jQuery获取table行数并输出单元格内容的实现方法

    本文实例讲述了jQuery获取table行数并输出单元格内容.分享给大家供大家参考,具体如下: js部分: <script language="javascript" type="text/javascript"> $(function() { $("#txtInput").attr("value", "90"); var v_temp = $("#lblMessage").

  • SQL行号排序和分页(SQL查询中插入行号 自定义分页的另类实现)

    (一)行号显示和排序 1.SQL Server的行号 A.SQL 2000使用identity(int,1,1)和临时表,可以显示行号 SELECT identity(int,1,1) AS ROWNUM, [DataID] INTO #1 FROM DATAS order by DataID; SELECT * FROM #1 B.SQL 2005提供一个很好用的函数row_number(), 可以直接用来显示行号,当然也可以使用SQL 2000的identity SELECT row_num

  • react中代码块输出,代码高亮显示,带行号,能复制的问题

    目录 react 代码块输出,代码高亮显示,带行号,能复制 以modal组件为例 infoModal.less样式 react 代码块插件 代码块插件 react 代码块输出,代码高亮显示,带行号,能复制 以modal组件为例 import React, { useState, useEffect } from 'react'; import { Modal, Button, message } from 'antd'; import Highlight from 'react-highligh

  • JS实现冒泡排序，插入排序和快速排序并排序输出

    JS实现冒泡排序，插入排序和快速排序并排序输出

    在一次面试中被问到了此问题,但是真是懵了,没能回答上来,后来通过JS整理了一下,在结合html代码做了一个文本框,把输入的内容从文本框排序输出,再次不做叙述了,下面通过一段代码给大家展示下: 以下是代码: index.html <!DOCTYPE html> <html> <head> <title>Sorting</title> <link rel="stylesheet" type="text/css&qu

  • Js实现动态添加删除Table行示例

    Js实现动态添加删除Table行示例

    最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu

  • js动态为代码着色显示行号

    本实例是使用Javascript插件,在浏览器客户端动态的为代码着色,可以显示行号.Javascript代码着色实例效果:http://www.keleyi.com/keleyi/phtml/codecolor/a/index.htm 以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri

随机推荐