成绩表成绩排序

最新推荐文章于 2023-02-19 00:15:17 发布

漂亮有内涵的大妹子

最新推荐文章于 2023-02-19 00:15:17 发布

阅读量477

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lujiayingwing/article/details/78252895

本文介绍了一种使用JavaScript实现的表格排序及查询功能的方法。通过将表格行转换为数组并利用sort函数进行排序，实现了根据指定列进行升序或降序排列的功能。此外，还提供了一个简单的查询功能，允许用户通过输入姓名来筛选表格中的记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击打开链接

<script type="text/javascript">//排序（4步）
                                       //1.创建空数组，存储伪数组的空间，变成真数组 var arr=[];
                                       //2.赋值，把伪数组中所有对象赋值给真空数组 arr[i]=lrows[i];
                                       //3.排序，sort   伪数组排序函数
                                       //4.把排序好的结果追加到节点中去
           window.onload=function(){
               var ltab=document.getElementById('tab');
               var lbody=ltab.tBodies[0];
               var lrows=lbody.rows;
               var lcells=lbody.cells;
               var lhead=ltab.tHead;

               function paixu(lie){//排序
               var arr=[];
               for(var i=0;i<lrows.length;i++){
                   arr[i]=lrows[i];
               }

               arr.sort(function(s1,s2){//比较大小
                   var a=parseInt(s1.cells[lie].innerHTML);
                   var b=parseInt(s2.cells[lie].innerHTML);
                   return b-a;
                   //return parseInt(s1.innerHTML)-parseInt(s2.innerHTML);
               });

               for(var i=0;i<arr.length;i++){
                   lbody.appendChild(arr[i]);
               }
               }

               var lyw=lhead.rows[0].cells[2];//语文
               lyw.onclick=function(){
                   paixu(2);
                   function paiming(){
                   for(var i=0;i<lrows.length;i++){
                       lrows[i].cells[0].innerHTML=i+1;
                   }
               }
               paiming();
               }
               var lsx=lhead.rows[0].cells[3];//数学
               lsx.onclick=function(){
                   paixu(3);
                   function paiming(){
                   for(var i=0;i<lrows.length;i++){
                       lrows[i].cells[0].innerHTML=i+1;
                   }
               }
               paiming();
               }
               var lyy=lhead.rows[0].cells[4];//英语
               lyy.onclick=function(){
                   paixu(4);
                   function paiming(){
                   for(var i=0;i<lrows.length;i++){
                       lrows[i].cells[0].innerHTML=i+1;
                   }
               }
               paiming();
               }

               //总分
               for(var i=0;i<lrows.length;i++){
                   var lyw1=parseInt(lrows[i].cells[2].innerHTML);
                   var lsx1=parseInt(lrows[i].cells[3].innerHTML);
                   var lyy1=parseInt(lrows[i].cells[4].innerHTML);
                   lrows[i].cells[5].innerHTML=lyw1+lsx1+lyy1;
               }

               //排名
               function paiming(){
                   for(var i=0;i<lrows.length;i++){
                       lrows[i].cells[0].innerHTML=i+1;
                   }
               }
               paiming();

               //输入名称查询

               var lbtn=document.getElementById('btn');
               lbtn.onclick=function(){
                   var ltxt=document.getElementById('txt');//放在事件里，数据会更新（加载）
                   var oText=ltxt.value;
                   for(var i=0;i<lrows.length;i++){
                       lrows[i].style.display='none';
                       var lname=lrows[i].cells[1].innerHTML;
                       if(oText==lname){
                           lrows[i].style.display='table-row';
                       }
                   }
               }
           }