title: Using jQuery tablesorter with javascript table array
body: <p>I am trying to use the jQuery plugin tablesorter (tablesorter.com) on an html table that is generated by a javascript array when my page loads. The table gets styled, by the table won't sort when the column headers are clicked.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/external/jquery/jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link type="text/css" rel="stylesheet" href="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.css"&gt;
  
    &lt;script type="text/javascript" src="/lib/jquery/tablesorter/jquery.tablesorter.js"&gt;&lt;/script&gt;
    &lt;link type="text/css" rel="stylesheet" href="/lib/jquery/tablesorter/themes/blue/style.css"&gt;
    &lt;style&gt;
    &lt;/style&gt;
    &lt;script&gt;
      $( document ).ready( function() {
          $( "table" ).tablesorter();
  
          $( "p" ).click( function() {
              $( this ).hide();
          });
      });
  
      $( function() {
          $( "#datepicker" ).datepicker();
      });
  
    &lt;/script&gt;
    &lt;script&gt;
      var frameData = [
        ["Phoenix Smasher", 15],
        ["Bone Breaker", 16],
        ["DeathFist", 60],
        ["Thruster", 20],
        ["S Jab", 10]
      ];
  
      function pageLoad() {
        var t = "";
        t += "&lt;thead&gt;";
        t += "&lt;tr&gt;";
        t += "&lt;th&gt;Move&lt;/th&gt;";
        t += "&lt;th&gt;Start Up&lt;/th&gt;";
        t += "&lt;/tr&gt;";
        t += "&lt;/thead&gt;";
        t += "&lt;tbody&gt;";
        for (var i = 0; i &lt; frameData.length; i++) {
          t += "&lt;tr&gt;";
          t += "&lt;td&gt;" + frameData[i][0] + "&lt;/td&gt;&lt;td&gt;" + frameData[i][1] + "&lt;/td&gt;";
          t += "&lt;/tr&gt;";
        }
        t += "&lt;/tbody&gt;";
        document.getElementById("frameTable").innerHTML = t;
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="pageLoad()"&gt;
    &lt;p&gt;Click the table headers to sort the array in descending order.&lt;/p&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;table id="frameTable" class="tablesorter"&gt;
    &lt;/table&gt;
  
    &lt;p&gt;jQuery test. This text will disappear on click.&lt;/p&gt;
    &lt;input type="text" id="datepicker"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><b>What I've tried:</b> Oddly enough, when I get rid of the javascript array and place actual html table data in between the <code>&lt;table&gt;</code> and <code>&lt;/table&gt;</code> tags, the tablesorter plugin works fine. Also, I've tried re-arranging the array and <code>pageLoad()</code> function with the jQuery code, with no luck at all.</p>
  
  <p>Any idea how to get this to work?</p>
  
  <p>The page is on my server: <a href="http://sketchcarellz.com/multiArray.html" rel="nofollow">http://sketchcarellz.com/multiArray.html</a></p>