title: Need to export tables inside a <div> as excel, keeping filled-in input and option data
body: <p>I have a page that takes some selections in javascript and makes a recommendation based on the inputs.  Some of my customers want to be able to save this data in excel format, but I'm running into issues retrofitting that.</p>
  
  <p>Here is the code that I found to export the HTML in a DIV as an XLS:</p>
  
  <pre><code>$('btnExport').addEvent('click', function(e){
          //getting values of current time for generating the file name
          var dt = new Date();
          var day = dt.getDate();
          var month = dt.getMonth() + 1;
          var year = dt.getFullYear();
          var hour = dt.getHours();
          var mins = dt.getMinutes();
          var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
          //creating a temporary HTML link element (they support setting file names)
          var a = document.createElement('a');
          //getting data from our div that contains the HTML table
          var data_type = 'data:application/vnd.ms-excel';
          var table_div = document.getElementById('dvData');
          var table_html = table_div.outerHTML.replace(/ /g, '%20');
          a.href = data_type + ', ' + table_html;
          //setting the file name
          a.download = 'exported_table_' + postfix + '.xls';
          //triggering the function
          a.click();
          //just in case, prevent default behaviour
          e.preventDefault();
      });
  </code></pre>
  
  <p>This <em>almost</em> does what I need it to, but I would like to be able to preserve the initial selections (both  drop downs and  fields) as their values in the final output.  I found some related code to go in and replace those tags with their values, but that affects the page itself, not the output.</p>
  
  <pre><code>var inputs = document.querySelectorAll('select');
  for (var i = 0; i &lt; inputs.length; i++) {
      var text = document.createTextNode(inputs[i].value);
      inputs[i].parentNode.replaceChild(text, inputs[i]);
  }
  </code></pre>
  
  <p>How do I combine these two functions into something that makes sense? The data I need to export is split across multiple tables.  I found some solutions leveraging jquery, but I'm using mootools on the site, and combining the two seems to break things.</p>