how2j.cn

步骤 1 : 练习-表格排序   
步骤 2 : 答案-表格排序   

步骤 1 :

练习-表格排序

edit  姿势不对,事倍功半! 点击查看做练习的正确姿势
点击表头,实现排序效果
<style> table{ border-collapse:collapse; width:90%; } tr{ border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; height:35px; } td{ width:25%; text-align:center; } a{ text-decoration: none; color:skyblue; } </style> <script> var col = 0; var reverse = false; function sort(column){ if(column == col) reverse = !reverse; col = column; var tbody = document.getElementById("tbody"); //通过getElementsByTagName取出来是一个Collection var trsCollection = document.getElementsByTagName("tr"); //因为Collection没有自带的排序函数,所以需要转换为数组,利用数组自带的排序 var trs =new Array(); for (var i=1; i <trsCollection.length; i++) { trs.push(trsCollection[i]); } trs.sort(comparator); for (var i=0; i <trs.length; i++) { tbody.appendChild(trs[i]); } } function comparator(tr1,tr2){ var td1 = tr1.children[col].innerHTML; //取某一行的第col列中的内容 var td2 = tr2.children[col].innerHTML; if(reverse) return td1.localeCompare(td2); else return td2.localeCompare(td1); } </script> <table> <tbody id="tbody"> <tr > <td ><a href="javascript:void(0)" onclick="sort(0)">id</a></td> <td ><a href="javascript:void(0)" onclick="sort(1)">名称</a></td> <td ><a href="javascript:void(0)" onclick="sort(2)">血量</a></td> <td ><a href="javascript:void(0)" onclick="sort(3)">伤害</a></td> </tr> <tr > <td>1</td> <td>gareen</td> <td>340</td> <td>58</td> </tr> <tr > <td>2</td> <td>teemo</td> <td>320</td> <td>76</td> </tr> <tr > <td>3</td> <td>annie</td> <td>380</td> <td>38</td> </tr> <tr > <td>4</td> <td>deadbrother</td> <td>400</td> <td>90</td> </tr> </tbody> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

答案-表格排序

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费5个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费5个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<style> table{ border-collapse:collapse; width:90%; } tr{ border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; height:35px; } td{ width:25%; text-align:center; } a{ text-decoration: none; color:skyblue; } </style> <script> var col = 0; var reverse = false; function sort(column){ if(column == col) reverse = !reverse; col = column; var tbody = document.getElementById("tbody"); //通过getElementsByTagName取出来是一个Collection var trsCollection = document.getElementsByTagName("tr"); //因为Collection没有自带的排序函数,所以需要转换为数组,利用数组自带的排序 var trs =new Array(); for (var i=1; i <trsCollection.length; i++) { trs.push(trsCollection[i]); } trs.sort(comparator); for (var i=0; i <trs.length; i++) { tbody.appendChild(trs[i]); } } function comparator(tr1,tr2){ var td1 = tr1.children[col].innerHTML; //取某一行的第col列中的内容 var td2 = tr2.children[col].innerHTML; if(reverse) return td1.localeCompare(td2); else return td2.localeCompare(td1); } </script> <table> <tbody id="tbody"> <tr > <td ><a href="javascript:void(0)" onclick="sort(0)">id</a></td> <td ><a href="javascript:void(0)" onclick="sort(1)">名称</a></td> <td ><a href="javascript:void(0)" onclick="sort(2)">血量</a></td> <td ><a href="javascript:void(0)" onclick="sort(3)">伤害</a></td> </tr> <tr > <td>1</td> <td>gareen</td> <td>340</td> <td>58</td> </tr> <tr > <td>2</td> <td>teemo</td> <td>320</td> <td>76</td> </tr> <tr > <td>3</td> <td>annie</td> <td>380</td> <td>38</td> </tr> <tr > <td>4</td> <td>deadbrother</td> <td>400</td> <td>90</td> </tr> </tbody> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2022-11-22 数组转换里面下标为什么从1开始而不是从0开始呢?
晏先生




var trsCollection = document.getElementsByTagName("tr"); //因为Collection没有自带的排序函数,所以需要转换为数组,利用数组自带的排序 var trs =new Array(); for (var i=1; i <trsCollection.length; i++) { trs.push(trsCollection[i]); }
 var trsCollection =  document.getElementsByTagName("tr");
 //因为Collection没有自带的排序函数,所以需要转换为数组,利用数组自带的排序
 var trs =new Array();
 for (var i=1; i <trsCollection.length; i++) {
    trs.push(trsCollection[i]);
 }

							


1 个答案

晏先生
答案时间:2022-11-22
因为表头不需要排序,不参与其中



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2021-03-30 答案
镜子里的笑脸




一个函数全部搞定,最主要的难题就是在比较大小后,怎么交换位置。 一开始用替换函数replacechild(a,b)总是出错,原因是a替换b的时候,会把b删掉,然后出现各种问题。 后面换成了插入函数insertbefore(a,b),问题就解决了。
加载中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格排序</title>
    <style>
        table{
            width:800px;
            text-align: center;
            margin: auto;
            border-collapse: collapse;
        }
        td{
            width:200px;
            border-bottom-style:solid;
            border-bottom-color: #f5f5f5;
            padding: 10px 0px;
        }
        th{
            width:200px;
            border-bottom-style:solid;
            border-bottom-color: lightgray;
            padding: 10px 0px;
        }
        a{
            text-decoration: none;
            color:lightskyblue;
        }
    </style>
</head>
<body>
<table id="ta">
    <tr>
        <th><a href="#" onclick="f(0)">id</a></td>
        <th><a href="#" onclick="f(1)">名称</a></td>
        <th><a href="#" onclick="f(2)">血量</a></td>
        <th><a href="#" onclick="f(3)">伤害</a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>gareen</td>
        <td>340</td>
        <td>58</td>
    </tr>
    <tr>
        <td>2</td>
        <td>teemo</td>
        <td>320</td>
        <td>76</td>
    </tr>
    <tr>
        <td>3</td>
        <td>annie</td>
        <td>380</td>
        <td>38</td>
    </tr>
    <tr>
        <td>4</td>
        <td>deadbrother</td>
        <td>400</td>
        <td>90</td>
    </tr>
</table>
<script>
   function f(n)                                      //n为第几列进行比较
   {
       var tb=document.getElementById("ta").lastChild;//table下面的子节点tbody
       var tr=tb.children,i,j,k=0;                    //tr为tb的子节点
       for(i=1;i<5;i++) {
           for (j = i + 1; j < 5; j++) {
               if (tr[i].children[n].innerHTML> tr[j].children[n].innerHTML) { //比较tr[i]与tr[j]的值的大小
                   tb.insertBefore(tr[j], tr[i]);          //交换tr[i]与tr[j]的位置,先把tr[i]插到tr[j]
                   tb.insertBefore(tr[i + 1], tr[j + 1]);  //然后tr[i]变成了t[i+1],把t[i+1]放到tr[j+1]前
                   k=k+1;                                  //k计算有没有进行过交换
               }
           }
       }
       if(k==0){                                           //没有进行过交换,则所有顺序颠倒
           tb.insertBefore(tr[4], tr[1]);
           tb.insertBefore(tr[4], tr[2]);
           tb.insertBefore(tr[4], tr[3]);
       }
   }
</script>
</body>
</html>

							


2 个答案

ljjljj
答案时间:2021-04-19
为什么tb那里要用lastchild

镜子里的笑脸
答案时间:2021-03-30
var temp = trs[x].innerHTML; trs[x].innerHTML = trs[y].innerHTML; trs[y].innerHTML = temp; 看其他人的代码,发现一种更简单的方法,我一开始直接交换tr,发现不行,竟然没有想到交换tr.innerHTML



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2021-01-12 关于参考答案的疑惑
2020-12-29 表格排序答案~正序|倒序均可
2020-11-09 我的心得笔记


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 28 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-HTML DOM-表格排序 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图