<p>点击按钮，表格 name 字段按字母排序:</p>

<p><button onclick="sortTable()">排序</button></p>

​

<table border="1" id="myTable">

  <tr>

    <th>Name</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Berglunds snabbkop</td>

    <td>Sweden</td>

  </tr>

  <tr>

    <td>North/South</td>

    <td>UK</td>

  </tr>

  <tr>

    <td>Alfreds Futterkiste</td>

    <td>Germany</td>

  </tr>

  <tr>

    <td>Koniglich Essen</td>

    <td>Germany</td>

  </tr>

  <tr>

    <td>Magazzini Alimentari Riuniti</td>

    <td>Italy</td>

  </tr>

  <tr>

    <td>Paris specialites</td>

    <td>France</td>

  </tr>

  <tr>

    <td>Island Trading</td>

    <td>UK</td>

  </tr>

  <tr>

    <td>Laughing Bacchus Winecellars</td>

    <td>Canada</td>

  </tr>

</table>

function sortTable() {

  var table, rows, switching, i, x, y, shouldSwitch;

  table = document.getElementById("myTable");

  switching = true;

  /*Make a loop that will continue until

  no switching has been done:*/

  while (switching) {

    //start by saying: no switching is done:

    switching = false;

    rows = table.getElementsByTagName("TR");

    /*Loop through all table rows (except the

    first, which contains table headers):*/

    for (i = 1; i < (rows.length - 1); i++) {

      //start by saying there should be no switching:

      shouldSwitch = false;

      /*Get the two elements you want to compare,

      one from current row and one from the next:*/

      x = rows[i].getElementsByTagName("TD")[0];

      y = rows[i + 1].getElementsByTagName("TD")[0];

      //check if the two rows should switch place:

      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

        //if so, mark as a switch and break the loop:

        shouldSwitch= true;

        break;

      }

    }

    if (shouldSwitch) {

      /*If a switch has been marked, make the switch

      and mark that a switch has been done:*/

      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);

      switching = true;

    }

  }

}