JS表格排序

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量887 收藏
点赞数 1
文章标签： javascript function class websphere stylesheet border

 

[源码：]
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=GB18030">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>数据列表页面</TITLE>
<SCRIPT>
 var newwin = null;
 
 function a(x,y,color)
 {
  document.write("<img border='0' style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' src='' width=1 height=1>")
 }
 
 function closeWin()
 {
  if(newwin!=null)
   newwin.close();
 }
 
 function sort(field,type)
 {
  var sortIndex = 0;
  if(field=='应缴费用')
  {
   sortIndex = 2;
  }else if(field=='实际征收费用')
  {
   sortIndex = 3;
  }else if(field=='征收率')
  {
   sortIndex = 4;
  }
  
   rowsCount = document.all.tab.tBodies[0].rows.length;
   rowObjArr = new Array();
   cellText = new Array();
   for(i=rowsCount-1;i>0;i--)
   {
    rowObjArr[i-1] = document.all.tab.tBodies[0].rows[i];
    cellText[i-1] = parseFloat(rowObjArr[i-1].cells[sortIndex].innerHTML);
//    document.all.tab.tBodies[0].deleteRow(i);
   }
   var sortStr;
   if(type==1)
    sortStr = sortArray1(cellText);
   else
    sortStr = sortArray2(cellText);
   createNewTable(rowObjArr,sortStr);
 }
 
 function createNewTable(rowObjArr,sortStr)
 {
  var tabObj = document.all.tab.tBodies[0];
  for(i=0;i<sortStr.length;i++)
  {
   tabObj.appendChild(rowObjArr[sortStr[i]]);
  }
 }
 
 function sortArray1(arrayValue)
 {
  var sortStr = new Array();
  var tmpArrayValue =arrayValue;
  var max = 0;
  var index=0;
  for(i=0;i<tmpArrayValue.length;i++)
  {
   for(j=0;j<tmpArrayValue.length;j++)
   {
    if(tmpArrayValue[j]>max)
    {
     max = tmpArrayValue[j];
     index = j;
    }
   }
   sortStr[i] = index;
   tmpArrayValue[index] = 0;
   max = 0;
  }
  return sortStr;
 }
 
 function sortArray2(arrayValue)
 {
  var sortStr = new Array();
  var tmpArrayValue =arrayValue;
  var max = 0;
  var index=0;
  for(i=0;i<tmpArrayValue.length;i++)
  {
   for(j=0;j<tmpArrayValue.length;j++)
   {
    if(tmpArrayValue[j]>max)
    {
     max = tmpArrayValue[j];
     index = j;
    }
   }
   sortStr[tmpArrayValue.length-i-1] = index;
   tmpArrayValue[index] = 0;
   max = 0;
  }
  return sortStr;
 }
</SCRIPT>
<link rel="stylesheet" type="text/css" href="../theme/Style.css"/>
</HEAD>
 
<BODY class="body" background="../../img/background_topic.jpg" οnunlοad="closeWin();">
<!--列表标题-->
<p align="center" class="title">2006年XX征收统计[单位：元]</p>
<hr width="100">
<!--列表-->
<div align="center">
  <center>
      <table  border="1" width="600" class="table" bordercolor="#003399" id="tab" style="position:absolute;left:30;top:100;">
        <tr class="tabletitle">
  <TD id="td1" colspan="2" cellspacing="0">
  
  <TABLE border="0" width="100">
   <TBODY>
    <TR class="tabletitle">
     <TD></TD>
     <TD align="right" valign="bottom">类型</TD>
    </TR>
    <TR class="tabletitle">
     <TD align="center" height="20" valign="bottom">区划</TD>
     <TD align="center" valign="bottom">
     状态
     </TD>
    </TR>
   </TBODY>
  </TABLE>  
  
  </TD>
  
          <td>应缴费用&nbsp&nbsp<a href="javascript:sort('应缴费用',0)">↑</a>&nbsp&nbsp<a href="javascript:sort('应缴费用',1)">↓</a></td>
         
          <td>实际征收费用&nbsp&nbsp<a href="javascript:sort('实际征收费用',0)">↑</a>&nbsp&nbsp<a href="javascript:sort('实际征收费用',1)">↓</a></td>
         
          <td>征收率&nbsp&nbsp<a href="javascript:sort('征收率',0)">↑</a>&nbsp&nbsp<a href="javascript:sort('征收率',1)">↓</a></td>
         
        </tr>
       
 
         <tr>
               
           <td rowspan="1" id="vtd1">
           一市
</td>
     
           <td>实征</td>
          
          <td>1.443241266E7</td>
          <td>1.362814917E7</td>
          
           <td>94.43%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd2">
           二市
</td>
     
           <td>实征</td>
          
          <td>1.347895162E7</td>
          <td>9918247.74</td>
          
           <td>73.58%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd3">
           三市
</td>
     
           <td>实征</td>
          
          <td>1.245498821E7</td>
          <td>1.154330773E7</td>
          
           <td>92.68%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd4">
           四市
</td>
     
           <td>实征</td>
          
          <td>8217641.0</td>
          <td>7722154.58</td>
          
           <td>93.97%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd5">
           五市
</td>
     
           <td>实征</td>
          
          <td>1.577075931E7</td>
          <td>1.663262121E7</td>
          
            <td>100%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd6">
           六市
</td>
     
           <td>实征</td>
          
          <td>9360421.71</td>
          <td>8939900.75</td>
          
           <td>95.51%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd7">
           七市
</td>
     
           <td>实征</td>
          
          <td>6417726.05</td>
          <td>5931752.37</td>
          
           <td>92.43%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd8">
           八市
</td>
     
           <td>实征</td>
          
          <td>4275531.69</td>
          <td>4241094.88</td>
          
           <td>99.19%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd9">
           九市
</td>
     
           <td>实征</td>
          
          <td>1.123953092E7</td>
          <td>1.028037566E7</td>
          
           <td>91.47%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd10">
           十市
</td>
     
           <td>实征</td>
          
          <td>4556974.01</td>
          <td>4615097.46</td>
          
            <td>100%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd11">
           十一市
</td>
     
           <td>实征</td>
          
          <td>4910780.0</td>
          <td>4802049.32</td>
          
           <td>97.79%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd12">
           十二市
</td>
     
           <td>实征</td>
          
          <td>5488044.52</td>
          <td>4830635.2</td>
          
           <td>88.02%</td>
        
         <tr>
               
           <td rowspan="1" id="vtd13">
           十三市
</td>
     
           <td>实征</td>
          
          <td>5989706.26</td>
          <td>4791161.17</td>
          
           <td>79.99%</td>
             
            </tr>
 
      </table>
 <script>
function line(x1,y1,x2,y2,color)
{
    var tmp
    if(x1>=x2)
    {
            tmp=x1;
            x1=x2;
            x2=tmp;
            tmp=y1;
            y1=y2;
            y2=tmp;
    }
    for(var i=x1;i<=x2;i++)
    {
            x = i;
            y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
           a(x,y,color);
    }
}
var vleft=tab.style.posLeft+8;
var vtop=tab.style.posTop;
  line(vleft,vtop,vleft+td1.offsetWidth,vtop+td1.offsetHeight-13,'#003399')
  var vtdwidth=0;
  if(13==0)
   vtdwidth = vleft+td1.offsetWidth/2;
  else
   vtdwidth = vleft+vtd1.offsetWidth;
  
  line(vleft,vtop,vtdwidth,vtop+td1.offsetHeight,'#003399')
</script>    
  </center>
</div>
</BODY>
</HTML>
 
 
[示例]                         2006年XX征收统计[单位：元]
 
 类型
区划状态
应缴费用  ↑  ↓实际征收费用  ↑  ↓征收率  ↑  ↓
一市 实征1.443241266E71.362814917E794.43%
二市 实征1.347895162E79918247.7473.58%
三市 实征1.245498821E71.154330773E792.68%
四市 实征8217641.07722154.5893.97%
五市 实征1.577075931E71.663262121E7100%
六市 实征9360421.718939900.7595.51%
七市 实征6417726.055931752.3792.43%
八市 实征4275531.694241094.8899.19%
九市 实征1.123953092E71.028037566E791.47%
十市 实征4556974.014615097.46100%
十一市 实征4910780.04802049.3297.79%
十二市 实征5488044.524830635.288.02%
十三市 实征5989706.264791161.1779.99%
LXHGDDY
关注
JS实现表格排序
Java技术与你分享
11-30 1万+
今天有点闲，写个小东西，使用JS实现点击表格标题栏实现自动排序功能，嘻嘻... 一、JS代码，文件名为code.js如下： (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId)
js table表格排序
小小阳
11-21 972
一：表格排序效果，根据点击表格头部th进行排序，如图： 二：示例代码，如下： #tb1 { border: 1px solid #ddd; } #tb1 thead th{ width: 60px; } #tb1 tbody td { border: 1px solid #ddd; width: 60px;
js 表格排序
一个爱分享的码农，希望和大家互相交流、学习、进步、奔小康
12-02 418
【代码】js 表格排序。
JavaScript实现表格排序
05-20 1511
Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。 效果 在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序 按照字符串比较来确定顺序 再次点击该栏目，变更为降序排序 点击其它栏目，则按其它栏目的值重新排序 注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色 要求 不能改动原html...
33种Javascript 表格排序控件收集
10-29
以下是对33种JavaScript表格排序控件的详细说明： 1. jQuery tablesorter（1）：这是一个基于jQuery的插件，支持多种类型的排序，包括数字、日期和自定义排序。它具有高度可定制性，允许用户添加自定义排序标志和...
JavaScript表格排序，点击表头即可排序
05-12
内容索引:脚本资源,Ajax/JavaScript,表格排序,表头　JavaScript表格排序，点击表头即可排序，此脚本支持中文汉字排序、中英文混合排序、数据大小排序、文件名称类型排序、日期排序、价格排序、中文和数字排序;...
javascript表格排序案例(面向对象)案例资料
02-15
通过以上步骤，你将能够构建一个功能完善的JavaScript表格排序功能，同时利用面向对象编程的思想提高了代码的可维护性和复用性。在学习这个案例资料时，务必仔细研究每个部分，理解其背后的逻辑，并尝试自己动手实践...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 872
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 579
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 466
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 893
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 278
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 260
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 624
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 764
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 303
echarts饼图内容循环播放实现
33款实用的JavaScript表格排序控件推荐
本文档汇集了33种不同的JavaScript表格排序控件，为开发人员提供了丰富的选择，以便在网页上实现动态表格排序功能。这些控件涵盖了各种技术路线和特性，满足不同项目的需求。 1. jQuery tablesorter 是一款非常受...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值