Sort multi-dimensional Javascript array

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>                                                                 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    //<![CDATA[
      //========================================================
      // Example showing how to sort multi-dimensional arrays.
      //========================================================
 
      var persons = [
              // First    , Last    , Age
              ["John"     , "Smith" , 29],
              ["Nicole"   , "Kidman", 46],
              ["Elizabeth", "Taylor", 79],
              ["Halle"    , "Berry" , 46],
              ["Liz"      , "Smith" , 29]
                   ]; 
 
      function main()
      {
        // Show the initial values.
        create_rows_from_array(persons, "initial-values-body");
 
        // Sort by last name
        persons.sort(sort_by_last_name);
        create_rows_from_array(persons, "sort-by-last-name-body");
 
        // Sort by last name and first name.
        persons.sort(sort_by_last_first_name);
        create_rows_from_array(persons, "sort-by-last-first-name-body");
 
      }
 
 
      //================================
      // Sort functions
      //================================
      // Sort by last name in ascending order.
      function sort_by_last_name(personA, personB)
      {
        var x = personA[1]; // Last name index is 1.
        var y = personB[1];
 
        if( x < y )
          return -1;
        else if ( x > y )
          return 1;
        else
          return 0;       
      }
 
      //Sort by last name and first name in ascending order.
      function sort_by_last_first_name(personA, personB)
      {
        // Append last name and first name together.
        //  And, then, compare the combined string.
        var x = personA[1]+personA[0]; 
        var y = personB[1]+personA[0];
 
        if( x < y )
          return -1;
        else if ( x > y )
          return 1;
        else
          return 0;       
      }
 
      //=====================================================
      // Help function. Not relevant to learn how to sort.
      //=====================================================
      function create_rows_from_array(data, table_id)
      {
        var table = document.getElementById(table_id);
        for(i=0; i<data.length; i++)
        {
          var row = document.createElement("tr");
          for(j=0; j<data[i].length; j++)
          {
            var td = document.createElement("td");
            var node = document.createTextNode(data[i][j]);
            td.appendChild(node);
 
            row.appendChild(td);
          }
          table.appendChild(row);
        }
 
      }              
    //]]>
    </script>
  </head>                                                                 
  <body onload="main()">
 
  <h1>Initial values</h1>
  <table>
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Age</th>
      </tr>
    </thead>  
    <tbody id="initial-values-body"/>
  </table>    
 
  <br /><br />
  <!-- Sort by last name -->
  <h1>Sort by last name</h1>
  <table>
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Age</th>
      </tr>
    </thead>  
    <tbody id="sort-by-last-name-body"/>
  </table>        
 
  <br /><br />
  <!-- Sort by last name and first name -->
  <h1>Sort by last name and first name</h1>
  <table>
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Age</th>
      </tr>
    </thead>  
    <tbody id="sort-by-last-first-name-body"/>
  </table>  
 
</body>                                                                 
</html>
Javascript
About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.