<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>
<script>
    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;
        }
      }
    }
</script>