在排序表格之前,先排序LI。以前排序过数组:http://taobao.fm/archives/725

排序li思路,假设理由有3,9,34,14几个的innerHTML,然后我们排序的时候,其实是从数组中,先把最小的数3挑出来,然后3放到这个LI的最后面一位;紧接着从剩下的数中挑最小的一位14挑出来;再放在li的最后一位;这样就可以实现排序的功能了

 

然后拆解步骤:先把一个LI拿出来,然后移动到另外一个地方:

先做一个LI从一个ul移动到另外一个ul的功能;

var oUl1=document.getElementById('ul1');
var oUl2=document.getElementById('ul2');
var oBtn1=document.getElementById('btn1');

oBtn1.onclick=function()
{
var oLi=oUl1.children[0];//声明的这个变量,就是要删除的节点;

oUl1.removeChild(oLi);
oUl2.appendChild(oLi);
}

全局代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#ul1 {background: orangered}
#ul2 {background: yellow}
</style>
<script>
window,onload=function()
{
var oUl1=document.getElementById('ul1');
var oUl2=document.getElementById('ul2');
var oBtn1=document.getElementById('btn1');

oBtn1.onclick=function()
{
var oLi=oUl1.children[0];//声明的这个变量,就是要删除的节点;

oUl1.removeChild(oLi);
oUl2.appendChild(oLi);
}


}
</script>
</head>
<body>
<ul id="ul1">
<li>123</li>
<li>154</li>
<li>3</li>
<li>13</li>
</ul>
<input id="btn1" type="button" value="移动"/>
<ul id="ul2">
</ul>
</body>
</html>

代码可以做优化,即使我们不用remove,直接append,也可以实现一样的功能;如下:

oBtn1.onclick=function()
{
var oLi=oUl1.children[0];//声明的这个变量,就是要删除的节点;

//oUl1.removeChild(oLi); //这个一个移除,然后用下面的语句添加;如果我们删除这短话,直接用下面的语句也可以实现功能的;
oUl2.appendChild(oLi); //这个语句可以做了两件事:1先把元素从原有的父级上删掉;2、添加到新的父级;也就是不需要remove,直接append也可以的;
}

然后,再实验,从一个LI的头部移动到这个LI的尾部;也就是刚才操作思路的第一阶段;

代码如下:

var oUl1=document.getElementById('ul1');
var oBtn1=document.getElementById('btn1');

oBtn1.onclick=function()
{
var oLi=oUl1.children[0];//声明的这个变量,就是要删除的节点;
oUl1.appendChild(oLi); //这个语句可以做了两件事:1先把元素从原有的父级上删掉;2、添加到新的父级;也就是不需要remove,直接append也可以的;
}

其中就是添加到自己:

oUl1.appendChild(oLi)

这样就实现了从头拿掉,查到尾部的功能;然后就是需要排序了;数组的排序是用sort来进行的;但是我们sort进行的都是数组的操作;li组成的o

\Li虽然有length,有[0]这些和数组差不多的语法,但是它并不是数组,不是array的属性。它是li的一个集合;这时候我们需要把oLi中li的innerHTML用parseInt()转化成数字;然后在用sort,配合return ni-n2来排序;

代码如下:

<script>
window.onload=function()
{
var oUl1=document.getElementById('ul1');
var oBtn1=document.getElementById('btn1');

oBtn1.onclick=function()
{
var oLi=document.getElementsByTagName('li');

var arr=[];

for(var i=0;i<oLi.length;i++)
{
arr[i]=oLi[i]
}

arr.sort(function(li1,li2)
{
var n1=parseInt(li1.innerHTML);
var n2=parseInt(li2.innerHTML);

return n1-n2;

});
//alert(arr[1].innerHTML);//这时候js已经在计算好排序了,只是乜有增加节点;下面是增加的方法

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

}


}
</script>

为了验证JS操作,可以做个弹窗看下:

for(var i=0;i<arr.length;i++)
{
alert('该把'+arr[i].innerHTML+'加到尾部了');//测试用的,测试下一步在干吗;
oUl1.appendChild(arr[i]);
}

这就是排序LI的方法,和排序数组的方法不一样;但是思路可以应用于排序表格中;下面是排序表格的;

首先对表格进行布局:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function ()
{
var oTab=document.getElementById('tab1');

}

</script>
</head>
<body>
<input id="btn1" type="button"value="排序"/>
<table id="tab1" border="1px" width="500px">
<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>4</td>
<td>bro</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>smile</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>alian</td>
<td>26</td>
<td></td>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>zhu</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alice</td>
<td>25</td>
<td></td>
</tr>

</tr>
</tbody>
</table>

</body>
</html>

思路和LI的差不多,

<script>
window.onload= function () {
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
var arr=[];

for(var i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=oTab.tBodies[0].rows[i];//让oTab的行数等于arr的行,这样arr就会成为一个数组;
}

arr.sort(function(tr1,tr2){
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML);
return n1-n2;
});
for (var i=0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i])
}

}
};
</script>

最终代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function () {
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
var arr=[];

for(var i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=oTab.tBodies[0].rows[i];//让oTab的行数等于arr的行,这样arr就会成为一个数组;
}

arr.sort(function(tr1,tr2){
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML);
return n1-n2;
});
for (var i=0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i])
}

}
};
</script>
</head>
<body>
<input id="btn1" type="button"value="排序"/>
<table id="tab1" border="1px" width="500px">
<thead>
<td>ID</td>
<td>name</td>
<td>ages</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>4</td>
<td>bro</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>smile</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>alian</td>
<td>26</td>
<td></td>
<tr>
<td>1</td>
<td>broszhu</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>zhu</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alice</td>
<td>25</td>
<td></td>
</tr>

</tr>
</tbody>
</table>

</body>
</html>

用下面的方法可以