how2j.cn

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

步骤 1 :

练习-表格排序

edit Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
点击表头,实现排序效果
<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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-11-09 我的心得笔记
mengli




我的解答。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table{
            border-collapse: collapse;
        }
        table td{
            border: 1px solid black;
        }
        .first {
            color: cornflowerblue;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>    
    <table id="table1">
        <tr class="first">
            <td onclick="sortType('id')"><a>id</a></td>
            <td onclick="sortType('name')"><a>名称</a></td>
            <td onclick="sortType('blood')"><a>血量</a></td>
            <td onclick="sortType('hurt')"><a>伤害</a></td>
        </tr>
        <tr>
            <td class="id">1</td>
            <td class="name">garen</td>
            <td class="blood">340</td>
            <td class="hurt">58</td>
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="name">anee</td>
            <td class="blood">44</td>
            <td class="hurt">11</td>
        </tr>
        <tr>
            <td class="id">3</td>
            <td class="name">tina</td>
            <td class="blood">11</td>
            <td class="hurt">77</td>
        </tr>
      </table>
      <script>
        function sortType(type){
            let tableNode = document.getElementsByTagName("tbody")[0];
            console.log("tableNode.children.length beginning: " + tableNode.children.length);

            let htmlCollection = document.getElementsByClassName(type);
            let itemArr = [...htmlCollection];
            itemArr.sort(function(a, b){
                if(type === "name"){
                    return a.innerHTML - b.innerHTML;
                }
                else{
                    return parseInt(a.innerHTML) - parseInt(b.innerHTML);
                }
            })

            //let origialFirst = document.getElementsByTagName("tr")[1];

            
            console.log(tableNode);
            console.log("tableNode.children.length before: " + tableNode.children.length);
            console.log(tableNode.children);
            
            for(let i=0;i<itemArr.length;i++){
                 tableNode.appendChild(itemArr[i].parentNode.cloneNode(true));
                 console.log("tableNode.children.length change: " + tableNode.children.length);
            }
  
            console.log("tableNode.children.length: " + tableNode.children.length);
            for(let i=0;i<itemArr.length;i++){
                let deleteNode = tableNode.children[1];
                console.log("now i is: " + i + deleteNode);
                tableNode.removeChild(deleteNode);
            }
        }
    </script>
</body> 
</html>
我觉得localecompare 排序数字是按字符串来的





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





2020-10-11 参考答案中有疑问
白枫




参考答案中的 tbody.appendChild(trs[i]); 为什么不会在原有的<tbody>下面新增新的<tr>而是直接改变了原来<tr>的位置 我自己写就会在原有表格下面追加行
加载中
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<style>
    table {
        border-collapse: collapse;
        width: 90%;
    }

    tr.odd {
        background-color: #f8f8f8;
    }

    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>
<div id="d">
    <table id="table">
        <tbody id="tbody">
        <tr>
            <td><a href="#" onclick="sortById()">id</a></td>
            <td><a href="#" onclick="sortByName()">名称</a></td>
            <td><a href="#" onclick="sortByHP()">血量</a></td>
            <td><a href="#" onclick="sortByDamage()">伤害</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var row0 = new Array("1", "gareen", "340", "58");
    var row1 = new Array("2", "teemo", "320", "76");
    var row2 = new Array("3", "annie", "380", "38");
    var row3 = new Array("4", "deadbrother", "400", "90");
    var rows = new Array(row0, row1, row2, row3);
    var div = document.getElementById("d");    
    var flag = false;

    function createTD(text) {
        var td = document.createElement("td");
        var text = document.createTextNode(text);
        td.appendChild(text);
        return td;
    }

    function createTR(texts) {
        var tr = document.createElement("tr");
        for (var i = 0; i < texts.length; i++) {
            var td = createTD(texts[i]);
            tr.appendChild(td);
        }
        return tr;
    }

/*    
    function createTable(rows) {
        var table = document.createElement("table");
        for (var i = 0; i < rows.length; i++) {
            var tr = createTR(rows[i]);
            table.appendChild(tr);
        }
        return table;
    }
*/
    function sortById(){
        flag=!flag;
        //var table = document.getElementById("table");
        var tbody=document.getElementById("tbody");
        var tr;
        for (var i = 0; i < rows.length; i++) {
            if (!flag)  tr = createTR(rows[i]);
            else tr = createTR(rows[rows.length-1-i]);
            tbody.appendChild(tr);
        }
    }
</script>

							





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





2020-09-29 动态创建表格及排序
2020-08-27 这段代码看不懂
2020-07-06 参考下面大海啊你都是水,马儿啊你四条腿!,完成的,选择排序,简单易懂


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

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

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

上传截图