排序表格内容

最新推荐文章于 2024-11-14 10:56:19 发布

hatalhcz

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量114

点赞数

分类专栏： html+css DOM javascript 文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/hatalhcz/article/details/83984227

版权

javascript 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

html+css

16 篇文章 0 订阅

订阅专栏

DOM

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="../Day26/doctool.js"></script>
<script type="text/javascript">

/*
表格中按照年龄的顺序进行排序。

思路：
1，每一个人的信息是一行。
	那么先将行都取出，临时存入到数组中，
2，并对数组中的行对象的其中一个单元格中的数据进行排序。
3，将排序后的行对象重新添加会表格对象中。

*/

var b = true;
function sorttab()
{
	//1,获取表格中所有的行对象。
	var tabNode = byTag("table")[0];
	var arr = tabNode.rows;
	
	//2,定义临时容器，将表格中需要参与排序的行对象临时存储。
	var arr = new Array();//临时容器中存入的都是表格行对象引用。
	for(var x=1; x<trs.length; x++)
	{
		arr[x-1] = trs[x];
	}
	
	
	sortt(arr);
	//alert(arr.length);
	var tbdNode = tabNode.childNodes[0];
	//alert(tbdNode.nodeName);
	
	if(b)
	{
		for(var x=0; x<arr.length; x++)
		{
			//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1].innerText);
			tbdNode.appendChild(arr[x]);
			
		}
		b = false;
	}
	else
	{
		for(var x=arr.length-1; x>=0; x--)
		{
			//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1].innerText);
			tbdNode.appendChild(arr[x]);
			
		}
		b = true;
	}
	
}

function sortt(arr)
{
	for(var x=0; x<arr.length; x++)
	{
		for(var y=x+1; y<arr.length; y++)
		{
			if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))
			{
				var temp = arr[x];
				arr[x] = arr[y];
				arr[y] = temp;
			}
		}
	}
}

</script>

</head>

<body>

<table>
	<tr>	
    	<th>姓名</th>
        <th><a href="javascript:void(0)" οnclick="sorttab()">年龄</a></th>
        <th>地址</th>
    </tr>
    
    <tr>	
    	<td>张三</td>
        <td>30</td>
        <td>北京</td>
    </tr>
    <tr>	
    	<td>李四</td>
        <td>4</td>
        <td>上海</td>
    </tr>
    <tr>	
    	<td>王武</td>
        <td>23</td>
        <td>广州</td>
    </tr>
    <tr>	
    	<td>赵六</td>
        <td>27</td>
        <td>南京</td>
    </tr>
    <tr>	
    	<td>周七</td>
        <td>25</td>
        <td>大连</td>
    </tr>
    <tr>	
    	<td>孙八</td>
        <td>29</td>
        <td>铁岭</td>
    </tr>
</table>

</body>
</html>