title: Export table data to excel using jQuery
body: <p>I'm using this code:</p>
  
  <pre><code>var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,'
      , template = '&lt;html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"&gt;&lt;head&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;&lt;x:ExcelWorkbook&gt;&lt;x:ExcelWorksheets&gt;&lt;x:ExcelWorksheet&gt;&lt;x:Name&gt;{worksheet}&lt;/x:Name&gt;&lt;x:WorksheetOptions&gt;&lt;x:DisplayGridlines/&gt;&lt;/x:WorksheetOptions&gt;&lt;/x:ExcelWorksheet&gt;&lt;/x:ExcelWorksheets&gt;&lt;/x:ExcelWorkbook&gt;&lt;/xml&gt;&lt;![endif]--&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;{table}&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;'
      , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
      , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
    return function(table, name) {
      if (!table.nodeType) table = document.getElementById(table)
      var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
      window.location.href = uri + base64(format(template, ctx))
    }
  })()
  </code></pre>
  
  <p>Here is my submit button:</p>
  
  <pre><code>&lt;td&gt;&lt;input type="button" onclick="tableToExcel('project_table', 'W3C Example Table')" value="Export to Excel"&gt;&lt;/td&gt;
  </code></pre>
  
  <p>The problem I'm having is some of my inputs are dropdowns and inputs but they are hidden on the time of building the excel file. So when the excel files first builds you'll see all the data and within 2 seconds all the data that has the hidden drop downs and inputs behind them go blank and render the html.</p>
  
  <p>Pic1:</p>
  
  <p><img src="https://i.stack.imgur.com/73SZG.png" alt="Fields with inputs dissapear"></p>
  
  <p>Pic2:</p>
  
  <p><img src="https://i.stack.imgur.com/MnNHp.png" alt="hidden elements"></p>
  
  <p>I'm trying to use textExtraction but it's not working for me.</p>
  
  <pre><code>$('#project_table').tablesorter({
          textExtraction: myTextExtraction
      });
  
      //todo: try getting the dataTable to work...
      //  it might be way better, just not sure how it would handle
      //  adding unrelated rows on the fly (comments)
      //$('#project_table').dataTable();
  </code></pre>
  
  <hr>
  
  <pre><code>var myTextExtraction = function(node)  
  {
      var elem = $(node);
      var theVal = null;
  
      if (elem.hasClass('edit')) {
          elem.children().each(function() {
              if ($(this).css('display') != 'none') {
                  if ($(this).is('span')) {
                      theVal = $(this).text();
                  } else { //all other element types (input, select, etc)
                      theVal = $(this).val();
                  }
              }
          });
  
      } else {
          theVal = elem.text();
      }
  
      //console.log(theVal);
  
  
      var c = node.childNodes.length;
  
      if (c == 1) {
          theVal = node.innerHTML.trim();
      } else if (c == 5) {
          theVal = node.childNodes[3].innerHTML.trim();
      }
  
      //console.log(theVal);
      return theVal;
  
  } 
  </code></pre>
  
  <p>Can anyone lend a hand, thank you.</p>
  
  <p>Also if anyone knows an IE8 fix, it seems to only work in chrome and FF.</p>