步骤 2 : 答案-表格排序
点击表头,实现排序效果
<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>
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
<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>
HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。
![]()
问答区域
2018-12-11
href="javascript:void(0)"是什么意思啊
1 个答案
liuxincheng 跳转到问题位置 答案时间:2019-01-23 <a href="javascript:void(0)" onClick="window.open()"> 点击链接后,页面不动,只打开链接
<a href="#" onclick="javascript:return false;"> 作用一样,但不同浏览器会有差异。
回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
2018-11-04
关于localeCompare方法
回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
2018-11-04
关于localCompare方法
2018-11-04
没积分的看过来
2018-09-11
appchild的功能
2018-08-22
请问如果我要交换两个引用类型的变量,要怎么交换呢?
2018-08-22
deadBrother
2017-11-16
用手写冒泡排序写了个答案,代码更精简,更容易读
2017-11-04
emm
2017-10-24
可以详细讲讲comparator的功能吗
2017-10-19
表格排序col,column等疑问
2017-08-14
求教
2017-08-09
站长,为什么点击一次是按升序排列,再点一次就是降序了?这不是每次调用函数时的reverse都是false吗?是因为reverse是全局对象吗?
2017-06-18
看看我这么写怎么样
2017-06-16
这有个bug
2017-04-18
这里的参数reverse是什么意思?
2017-04-02
关于替换的问题
2017-01-11
数组排序完成之后插入回tbody,为啥排序之前的数据被自动替换了?
提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|