DOM里面的排序

一DOM里面的排序

　　<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　    <meta charset="UTF-8">
 　　   <title>Document</title>
  　　  <style type="text/css">
  　　      #ul1{background:green;}
 　　   </style>
　　</head>
　　<body>
    　　<ul id="ul1">
    　　    <li>34</li>
      　　  <li>25</li>
     　　   <li>9</li>
     　　   <li>88</li>
      　　  <li>54</li>
  　　  </ul>
  　　  <input id="btn1" type="button" name="" value="排序">
　　</body>
　　</html>
　　<script type="text/javascript">
 　　   var oul1 = document.getElementById('ul1');
  　　  var obtn = document.getElementById('btn1');
  　　  console.log(obtn);
  　　  obtn.onclick = function(){
  　　      var ali = document.getElementsByTagName('li');
    　　    var arr = [];
      　　  for(var i = 0; i< ali.length;i++){
         　　   arr[i] = ali[i];
      　　  }
       　　 arr.sort(function(li1,li2){
           　　 var n1 = parseInt(li1.innerHTML);
          　　  var n2 = parseInt(li2.innerHTML);
           　　 return n1-n2;
      　　  });
     　　   // alert(arr[0].innerHTML);
        　　for(var i =0;i <arr.length;i++){
          　　  alert("该把"+arr[i].innerHTML+"插入到最后");
       　　     oul1.appendChild(arr[i]);
    　　    }
    　　    
 　　   }
　　</script>

二DOM里面的表格排序

　  <!DOCTYPE html>
　　<html lang="en">
　　<head>
　　    <meta charset="UTF-8">
    　　<title>Document</title>
　　</head>
　　<body>
    　　<label>姓名:</label><input type="text" id="name">
   　　 <label>搜索:</label><input type="button" value="排序" id="btn">
   　　 <table id="tab1" border="1" width="500">
       　　 <thead>
          　　  <td>ID</td>
         　　   <td>姓名</td>
           　　 <td>年龄</td>
           　　 <td>操作</td>
       　　 </thead>
        　　<tbody>
         　　   <tr>
               　　 <td>8</td>
              　　  <td>Blue</td>
             　　   <td>27</td>
             　　   <td></td>    
         　　   </tr>
            　　<tr>
              　　  <td>7</td>
               　　 <td>Red</td>
              　　  <td>29</td>
              　　  <td></td>   
          　　  </tr>
          　　  <tr>
            　　    <td>1</td>
              　　  <td>Yellow</td>
                　　<td>30</td>
               　　 <td></td>   
            　　</tr>
           　　 <tr>
             　　   <td>3</td>
                　　<td>Green</td>
               　　 <td>30</td>
               　　 <td></td>   
            　　</tr>
          　　  <tr>
             　　   <td>5</td>
              　　  <td>Black</td>
              　　  <td>30</td>
             　　   <td></td>    
          　　  </tr>
         　　   <tr>
               　　 <td>4</td>
              　　  <td>White</td>
              　　  <td>25</td>
             　　   <td></td>    
          　　  </tr>
      　　  </tbody>
    　　</table>
　　</body>
　　</html>
　　<script type="text/javascript">
  　　  var otab = document.getElementById('tab1');
  　　  var obtn = document.getElementById('btn');
  　　  // console.log(otab);
   　　 obtn.onclick = function(){
    　　    var arr = [];
      　　  for(var i =0;i<otab.tBodies[0].rows.length;i++){
       　　     arr[i] = otab.tBodies[0].rows[i];
     　　   }
      　　  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++){
       　　     alert("该把"+arr[i].innerHTML +"插入到最后");
         　　   otab.tBodies[0].appendChild(arr[i]);
      　　  }
  　　  }
</script>