1、li排序：
所用的基础知识：appendChild()方法的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #ul1{background: green;} #ul2{background: yellow;} </style> <script> window.onclick = function(){ var oUl1 = document.getElementById("ul1"); var oUl2 = document.getElementById("ul2"); var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){ var aLi = oUl1.getElementsByTagName("li"); //oUl1.removeChild(aLi[0]); oUl2.appendChild(aLi[0]); //作用：1、删除原节点 2增加新节点、 } } </script> </head> <body> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <input type = "button" value="移动" id="btn1"> <ul id = "ul2"> </ul> </body> </html> li排序： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #ul1{background: green;} </style> <script> window.onclick = function(){ var oUl1 = document.getElementById("ul1"); var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){ var aLi = oUl1.getElementsByTagName("li"); //得到的是元素集合，并不是真正意义上的数组，故不能直接使用sort()方法。 var arry = []; for(var i = 0; i < aLi.length; i++){ arry[i] = aLi[i]; } arry.sort(function(li1,li2){ //sort方法需要一个比较函数 var num1 = parseInt(li1.innerHTML); var num2 = parseInt(li2.innerHTML); return num1 - num2; }) for(var i = 0; i < arry.length; i++){ oUl1.appendChild(arry[i]); } } } </script> </head> <body> <ul id="ul1"> <li>100</li> <li>20</li> <li>310</li> <li>4</li> <li>5</li> <li>10</li> </ul> <input type = "button" value="排序" id="btn1"> </body> </html>2、表格排序：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onclick = function(){ var oBtn = document.getElementById("btn1"); var oTab = document.getElementsByTagName("table")[0]; oBtn.onclick = function(){ var arry = []; for(var i = 0; i < oTab.tBodies[0].rows.length; i++){ arry[i] = oTab.tBodies[0].rows[i]; } arry.sort(function(tr1,tr2){ var num1 = parseInt(tr1.cells[0].innerHTML); var num2 = parseInt(tr2.cells[0].innerHTML); return num1 - num2; }); for(var i = 0; i < arry.length; i++){ oTab.tBodies[0].appendChild(arry[i]); } } } </script> </head> <body> <input id = "btn1" type = "button" value = "排序"/> <table border="1px" width="500px" id = "tab1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>5</td> <td>blue</td> <td>27</td> <td></td> </tr> <tr> <td>2</td> <td>张三</td> <td>36</td> <td></td> </tr> <tr> <td>1</td> <td>李斯</td> <td>47</td> <td></td> </tr> <tr> <td>3</td> <td>李斯</td> <td>47</td> <td></td> </tr> <tr> <td>4</td> <td>李斯</td> <td>47</td> <td></td> </tr> </tbody> </table> </body> </html>
