HTML DOM系列教材（十二）- 表格排序

HTML DOM系列教材（十一）- 常用场景

工具版本兼容问题

步骤 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个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

HTML DOM系列教材（十一）- 常用场景

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

问答区域

2023-09-11 练习-表格排序

旧时亭台阁

关于前端部分-HTML DOM-表格排序的提问

talk is cheap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        table tr:first-child {
            color: deepskyblue;
            cursor: pointer;
        }
        table tr {
            line-height: 30px;
            border-bottom: 1px solid darkgrey;
        }
        table tr:nth-child(even) {
            background-color: gainsboro;
        }
        table td {
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td onclick="sort(this);">id</td>
            <td onclick="sort(this);">名称</td>
            <td onclick="sort(this);">血量</td>
            <td onclick="sort(this);">伤害</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>
</body>
<script>
    function sort(td) {
        var firstRow = td.parentNode;

        // 解析是第几列
        var colIndex = -1;
        for (let i = 0; i < firstRow.children.length; i++) {
            if (firstRow.children[i] === td) {
                colIndex = i;
                break;
            }
        }

        var parent = firstRow.parentNode;

        // 做个备份，保留所有行数据
        var bakAllRow = [...parent.children];
        // 清空表格
        // 不能直接用 children 属性遍历，移除子节点后，children 属性会变化的，所以需要作备份
        for (let row of bakAllRow) {
            parent.removeChild(row);
        }

        // 排序
        var otherRows = bakAllRow.filter(o => o !== firstRow);
        otherRows.sort((a, b) => {
            // 提取相应单元格的内容
           var wa = a.children[colIndex].innerHTML;
           var wb = b.children[colIndex].innerHTML;
           // TODO: 进行比较
           return wa.localeCompare(wb);
        });

        // 重新给表格添加行数据
        parent.appendChild(firstRow);
        for (let row of otherRows) {
            parent.appendChild(row);
        }
    }
</script>
</html>

1 个答案

CharlieLong
答案时间：2023-11-09

所有习题答案

代码超过 5行，点击查看

<!--练习1：删除行为前的提示-->
<!--练习2：登录时验证账号密码是否为空-->
<!--练习3：提交数据验证长度-->
<!--练习4：验证年龄是否为数字-->
<!--练习5：验证年龄是否为整数-->
<!--练习6：验证email格式是否正确-->
<!--练习7：隐藏和显示-->
<!--练习8：表格排序-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>DOM常见常见场景</title>
</head>
<body id="body">
<!--练习1：删除行为前的提示-->
<!--练习8：表格排序-->
<h3>练习1：删除行为前的提示</h3>
<h3>练习8：表格排序</h3>
<table id="Heroes" ></table>
<!--练习2：登录时验证账号密码是否为空-->
<h3>练习2：登录时验证账号密码是否为空</h3>
<form method="post" action="calculate.html" onsubmit="return login()">
    <div>
        账号：<input type="text" id="user">
    </div>
    <div>
        密码：<input type="text" id="passwd">
    </div>
    <div>
        <button type="submit">登录</button>
    </div>
</form>
<!--练习3：提交数据验证长度-->
<h3>练习3：提交数据验证长度</h3>
<form method="post" action="calculate.html" onsubmit="return login()">
    <div>
        账号：<input type="text" id="user1">
    </div>
    <div>
        密码：<input type="text" id="passwd1">
    </div>
    <div>
        <button type="submit">登录</button>
    </div>
</form>
<!--练习4：验证年龄是否为数字-->
<!--练习5：验证年龄是否为整数-->
<!--练习6：验证email格式是否正确-->
<h3>练习4：验证年龄是否为数字</h3>
<h3>练习5：验证年龄是否为整数</h3>
<h3>练习6：验证email格式是否正确</h3>
<div>
    账号：<input type="text" id="user3">
</div>
<div>
    年龄：<input type="text" id="inputCheck" onkeyup="checkisInt()"><span id="returnisInt"></span>
</div>
<div>
    E-mail：<input type="text" id="inputCheck_email" onkeyup="checkisEmail()"><span id="returnisEmail"></span>
</div>
<div>
    <button onclick="checkisPass()">注册</button>
</div>

<!--练习7：隐藏和显示-->
<h3>练习7：隐藏和显示</h3>
<button onclick="showDiv()">显示DIV</button>
<button onclick="hideDiv()">隐藏DIV</button>
<div id="divtest">这是一个DIV</div>
<!--练习8：表格排序-->
<h3>练习8：表格排序</h3>
<script>
    // <!--练习1：删除行为前的提示-->
    //初始化列和内容信息
    let heroesArrayCol=["id","名称","血量","伤害"];
    let heroesArrayVal=[[1,"garren","340","58"],
        [2,"teemo","320","76"],
        [3,"annie","380","38"],
        [4,"deadbrother","400","90"]];
    let tbHeroes=document.getElementById("Heroes");
    //表格首行信息
    let tbrowFirst=document.createElement("tr");
    tbrowFirst.id="firstRow";
    for(let i=0;i<heroesArrayCol.length;i++){
        let td=document.createElement("td");
        td.id="col"+i;
        let a=document.createElement("a");
        a.href="#";
        a.id=i;
        a.setAttribute("onclick","sort("+i+")")
        let aText=document.createTextNode(heroesArrayCol[i]);
        a.appendChild(aText);
        td.appendChild(a);
        td.setAttribute("width","20%");
        tbrowFirst.appendChild(td);
    }
    //加入操作列
    let td=document.createElement("td");
    td.appendChild(document.createTextNode("操作"));
    td.setAttribute("width","20%");
    tbrowFirst.appendChild(td);
    tbHeroes.appendChild(tbrowFirst);

    //表格中添加数据行信息
    appendRow();
    function appendRow(){
        let tbody=document.createElement("tbody");
        tbody.id="tbody";
        tbHeroes.appendChild(tbody);

        let tbrowVal=new Array(heroesArrayVal.length);
        for(let i=0;i<heroesArrayVal.length;i++){
            tbrowVal[i]=document.createElement("tr");
            tbrowVal[i].id=i;
            tbody.appendChild(tbrowVal[i]);
            for(let j=0;j<heroesArrayVal[i].length;j++){
                let td=document.createElement("td");
                let tdText=document.createTextNode(heroesArrayVal[i][j]);
                td.appendChild(tdText);
                tbrowVal[i].appendChild(td);
            }
            //加入操作列按钮
            let td=document.createElement("td");
            let a=document.createElement("a");
            let aText=document.createTextNode("删除");
            a.href="#";
            a.appendChild(aText);
            a.setAttribute("onclick","delRow(this)")
            td.appendChild(a);
            tbrowVal[i].appendChild(td);
            if(i%2===0){
                tbrowVal[i].className="oddRow"
            }else{
                tbrowVal[i].className="evenRow"
            }
        }
        //调整样式
        tbHeroes.style.width="60%";
        tbHeroes.style.borderCollapse="collapse"
        let firstRow=document.getElementById("firstRow");
        let oddRow=document.getElementsByClassName("oddRow");
        let evenRow=document.getElementsByClassName("evenRow");
        firstRow.style.backgroundColor="write";
        firstRow.style.borderBottomColor="4E4E4E";
        firstRow.style.borderBottomStyle="double";

        for(let i=0;i<oddRow.length;i++){
            oddRow[i].style.backgroundColor="rgb(248,248,248)";
            oddRow[i].style.borderBottomColor="#C0BEBE";
            oddRow[i].style.borderBottomStyle="solid";
        }
        for(let i=0;i<evenRow.length;i++){
            evenRow[i].style.backgroundColor="rgb(255,255,255)";
            evenRow[i].style.borderBottomColor="#C0BEBE";
            evenRow[i].style.borderBottomStyle="solid";
        }
    }
    //执行删除操作
    function delRow(toBeDel){
        let trNum=toBeDel.parentNode.parentNode;
        let tbody=document.getElementById("tbody");
        tbody.removeChild(trNum);
        //删除数组中的元素
        let id=trNum.childNodes[0].textContent;
        for(let i=0;i<heroesArrayVal.length;i++){
            if(heroesArrayVal[i][0]===Number(id)){
                heroesArrayVal.splice(i,1);
                console.log(heroesArrayVal);
            }
        }
    }
    //执行列排序
    let col = 0;
    let 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 =[];
    //     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);
    // }
    function sort(column){
        if(column===col)
            reverse=!reverse;
        col=column;
        heroesArrayVal.sort(comparator);
        let tbody=document.getElementById("tbody");
        tbody.remove();
        appendRow();
    }
    function comparator(val1,val2){
        let td1=String(val1[col]);
        let td2=String(val2[col]);
        if(!reverse)
            return td1.localeCompare(td2);
        else
            return td2.localeCompare(td1);
    }

    // <!--练习2：登录时验证账号密码是否为空-->
    function login(){
        let user=document.getElementById("user").value;
        let passwd=document.getElementById("passwd").value;
        if(user===""||passwd===""){
            alert("用户名或密码不能为空")
            return false
        }else if(user.length<3){
            alert("用户名长度不能小于3位")
            return false
        }
        return true
    }
    //<!--练习4：验证年龄是否为数字-->
    let isPassCheck=false;
    function checkisInt(){
        let input=Number(document.getElementById("inputCheck").value);
        let returnisInt=document.getElementById("returnisInt")
        if(Number.isInteger(input)&&input!==0){
            returnisInt.textContent="";
            isPassCheck=true;
        }else if(!Number.isInteger(input)){
            returnisInt.textContent="请录入整数!";
            isPassCheck=false;
        }else if(input===0){
            returnisInt.textContent="请输入正确的年龄";
            isPassCheck=false;
        }
    }
    function checkisPass(){
        if(isPassCheck===false){
            alert("校验不通过，请修改后再提交！");
        }else{
            alert("注册成功！");
        }
    }
    function checkisEmail(){
        let input=document.getElementById("inputCheck_email").value;
        let returnisEmail=document.getElementById("returnisEmail")
        var Regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if(Regex.test(input)){
            returnisEmail.textContent="";
            isPassCheck=true;
        }else if(!Regex.test(input)){
            returnisEmail.textContent="邮箱格式不正确!";
            isPassCheck=false;
        }else if(input===""){
            returnisEmail.textContent="邮箱不能为空";
            isPassCheck=false;
        }
    }

    <!--练习7：隐藏和显示-->
    function showDiv(){
        let div=document.getElementById("divtest");
        div.style.display="block";
    }
    function hideDiv(){
        let div=document.getElementById("divtest");
        div.style.display="none";
    }

</script>
</body>

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-11-22 数组转换里面下标为什么从1开始而不是从0开始呢？

晏先生

关于前端部分-HTML DOM-表格排序的提问

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 答案

镜子里的笑脸

关于前端部分-HTML DOM-表格排序 -答案-表格排序的提问

一个函数全部搞定，最主要的难题就是在比较大小后，怎么交换位置。一开始用替换函数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 关于参考答案的疑惑

阿Dine

关于前端部分-HTML DOM-表格排序 -答案-表格排序的提问

为什么原有的表格行没有删除，但追加行却不会在表格最后增加行另外使用replaceChild(new,old)却无法完成新行与旧行的替换，会报错说参数里的tr元素不是节点

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

2 个答案

pplivilqq
答案时间：2022-04-12

重学java，你说的没错，当把站长的代码改成这样后就能证明：“appendChild(原有的节点)是把原有的节点从原先的顺序里拿走，然后再插入”

//  trs.sort(comparator);
//  for (var i=0; i <trs.length; i++) {
              tbody.appendChild(trs[1]);
//  }

重学java
答案时间：2022-01-16

同样有疑惑。我自己写的逻辑，跟站长的稍微类似，只想到用数组去sort取出来的选中的td，没想过直接可以把整个tr 放到数组里去sort，都用到了自定义排序规则，也都用到了parentNode.appendChild(); 一开始我也是先将取出来的tr从tbody中删除，再append，看完站长的代码，把removeChild注释掉一样能正常运行，再看了其他人的回答，得出的结论是：如果tr原本就是tbody中存在的元素，而不是通过createElement 出来的新的元素。那么，tbody直接appendChild(tr)，相当于把这个tr从原先的顺序里拿走，然后再插入。有待试验验证。

代码超过 5行，点击查看

<style>
	table{
		width:80%;
		text-align:center;
		border-collapse:collapse;
	}
	tr{
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: lightgray;
	}
	tr.name{
		color:lightblue;
	}
	td{
		width:25%;
	}

</style>

<table>
	<tbody id="ta">
	<tr class="name">
		<td head="id" onclick="sortby(this)">id</td>
		<td head="name" onclick="sortby(this)">名称</td>
		<td head="blood" onclick="sortby(this)">血量</td>
		<td head="harm" onclick="sortby(this)">伤害</td>
	</tr>
	<tr class="content">
		<td name="id">1</td>
		<td name="name">gareen</td>
		<td name="blood">340</td>
		<td name="harm">58</td>
	</tr>
	<tr class="content">
		<td name="id">2</td>
		<td name="name">teemo</td>
		<td name="blood">320</td>
		<td name="harm">76</td>
	</tr>
	<tr class="content">
		<td name="id">3</td>
		<td name="name">annie</td>
		<td name="blood">380</td>
		<td name="harm">38</td>
	</tr>
	<tr class="content">
		<td name="id">4</td>
		<td name="name">deadbrother</td>
		<td name="blood">400</td>
		<td name="harm">90</td>
	</tr>
	</tbody>
</table>

<script>
	function compdesc(v1,v2){
		var v1str = v1.childNodes[0].nodeValue;
		var v2str = v2.childNodes[0].nodeValue;
		if(v2str>v1str){
			return 1;
		}else{
			return -1;
		}
		  //v2>v1表示大的放前面，小的放后面
	}
	
	function compasc(v1,v2){
		var v1str = v1.childNodes[0].nodeValue;
		var v2str = v2.childNodes[0].nodeValue;
		if(v1str>v2str){
			return 1;
		}else{
			return -1;
		}
		  //v1>v2表示小的的放前面，大的放后面
	}
	
	var sortmethord = "desc";
	function sortby(td){
		
		var name = td.attributes["head"].nodeValue;
		console.log(name);
		var tds = document.getElementsByName(name);
		console.log(tds);
		var tdArray = new Array();
		for(i=0;i<tds.length;i++){
			var td= tds[i];
			console.log(td);
			tdArray.push(td);
		}
		console.log(tdArray);
		if(sortmethord == "asc"){
			tdArray.sort(compasc);
			console.log("asc sorted");
			sortmethord = "desc";
		}else if(sortmethord == "desc"){
			tdArray.sort(compdesc);
			console.log("desc sorted");
			sortmethord = "asc";
		}
		console.log(tdArray);
		//clear();
		var trArray = new Array();
		var ta = document.getElementById("ta");
		for(i=0;i<tdArray.length;i++){
			var tr = tdArray[i].parentNode;
			trArray.push(tr);
			//如果是表格里面已经存在的tr，不需要删除，直接append，相当于重新插入
			//ta.removeChild(tr); 
		}
		console.log(trArray);
		for(i=0;i<trArray.length;i++){
			var tr = trArray[i];
			ta.appendChild(tr);
		}
	}
	

</script>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-12-29 表格排序答案~正序|倒序均可

hhhzt

关于前端部分-HTML DOM-表格排序的提问

<!DOCTYPE > <html> <head> <meta charset="UTF-8"> <title>表格排序</title> <script> function sort(a){ var label = {'id':0,'名称':1,'血量':2,'伤害':3}; var table = document.getElementById('table').children[0]; var is_acs = true for(var i=1;i<4;i++){ //先遍历一次判断是否已经为正序 if(table.children[i].children[label[a.innerText]].innerText >= table.children[i+1].children[label[a.innerText]].innerText) {is_acs = false;break;} //不是正序，则直接跳出 } if(is_acs){ //已经是正序，则倒序输出 for(var i=1;i<5;i++){ //正序排序 for(var j=i+1;j<5;j++){ if(table.children[i].children[label[a.innerText]].innerText < table.children[j].children[label[a.innerText]].innerText) table.insertBefore(table.children[j],table.children[i]); } } } else{ //如果不是正序，整按正序排序 for(var i=1;i<5;i++){ //正序排序 for(var j=i+1;j<5;j++){ if(table.children[i].children[label[a.innerText]].innerText > table.children[j].children[label[a.innerText]].innerText) table.insertBefore(table.children[j],table.children[i]); } } } } </script> <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: lightblue;} </style> </head> <body> <table id = 'table'> <tr class="head"> <td><a href="#nowhere" onclick="sort(this)">id</a></td> <td><a href="#nowhere" onclick="sort(this)">名称</a></td> <td><a href="#nowhere" onclick="sort(this)">血量</a></td> <td><a href="#nowhere" onclick="sort(this)">伤害</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> </body> </html>

<!DOCTYPE >
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格排序</title>
		<script>
			function sort(a){
				var label = {'id':0,'名称':1,'血量':2,'伤害':3};
				var table = document.getElementById('table').children[0];
				var is_acs = true
				for(var i=1;i<4;i++){	//先遍历一次判断是否已经为正序
					if(table.children[i].children[label[a.innerText]].innerText >= table.children[i+1].children[label[a.innerText]].innerText)
						{is_acs = false;break;}		//不是正序，则直接跳出
				}
				if(is_acs){		//已经是正序，则倒序输出
					for(var i=1;i<5;i++){			//正序排序
						for(var j=i+1;j<5;j++){
							if(table.children[i].children[label[a.innerText]].innerText < table.children[j].children[label[a.innerText]].innerText)
								table.insertBefore(table.children[j],table.children[i]);
						}
					}
				}
				else{			//如果不是正序，整按正序排序
					for(var i=1;i<5;i++){			//正序排序
						for(var j=i+1;j<5;j++){
							if(table.children[i].children[label[a.innerText]].innerText > table.children[j].children[label[a.innerText]].innerText)
								table.insertBefore(table.children[j],table.children[i]);
						}
					}
				}
			}
		</script>
		<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: lightblue;}
		</style>
	</head>
	<body>
		<table id = 'table'>
			<tr class="head">
				<td><a href="#nowhere" onclick="sort(this)">id</a></td>
				<td><a href="#nowhere" onclick="sort(this)">名称</a></td>
				<td><a href="#nowhere" onclick="sort(this)">血量</a></td>
				<td><a href="#nowhere" onclick="sort(this)">伤害</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>
	</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

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

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-HTML DOM-表格排序的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

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

上传截图