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公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

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>

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

2020-11-09 我的心得笔记

mengli

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

我的解答。

<!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 排序数字是按字符串来的

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

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

提问之前请登陆

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

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

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

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

上传截图