Download a `<table>` as a CSV file

Question

I have a table written in HTML and JavaScript and I need to download the contents of it to a .csv file when I press a button.

Here is what my table looks like (a lot of code omitted):

<div class="table-responsive">
  <table class="table" id="myTable">
    <thead>
      <tr>
        <td class="col-xs-1"><b data-toggle="tooltip" data-placement="top" title="Name or Index of the Vessel or Well">Well</b></td>
        <td class="col-xs-1"><b data-toggle="tooltip" data-placement="top" title="Whatever name you want to give this sample">Sample Name</b></td>
        <td class="col-xs-1"><b data-toggle="tooltip" data-placement="top" title="Type of Sample, select from Dropdown">Type</b></td>
        <td class="col-xs-1"><b data-toggle="tooltip" data-placement="top" title="genomic DNA Concentration, in ng/ul (&gt;10). Not Required">Conc</b></td>
        <td class="col-xs-1"><b data-toggle="tooltip" data-placement="top" title="Please enter which Previously-Used Order number the gRNA or Primers relate to.  Entering this information will give you a discount since we don&#39;t need to make new amplicon primers.">GEiC OrderID</b></td>
        <td class="col-xs-1"><b data-toggle="tooltip" data-placement="top" title="Species">Species</b></td>
        <td class="col-xs-1"><b data-toggle="tooltip" data-placement="top" title="NCBI EntrezGene ID, or Official GeneSymbol">Gene ID</b></td>
        <td class="col-xs-2"><b data-toggle="tooltip" data-placement="top" title="Sequence of the gRNA or feature you are searching for">gRNA Seq</b></td>
        <td class="col-xs-1"><b data-toggle="tooltip" data-placement="top" title="What type of modification do you expect?">Mods (KI/KO)</b></td>
        <td class="col-xs-1"><b data-toggle="tooltip" data-placement="top" title="Donor Sequence (if applicable)">Donor</b></td>
      </tr>
    </thead>
    <tbody>
      <tr name="showrow_0" style="display:">
        <td class="col-xs-1">
          <input class="form-control" id="0_1" name="SeqOrder.Rows[0].ColumnValues[Well].Value" onchange="UpdateTable()" type="text" value="A01" />
        </td>
        <td class="col-xs-1">
          <input class="form-control" id="0_2" name="SeqOrder.Rows[0].ColumnValues[Sample Name].Value" onchange="UpdateTable()" type="text" value="" />
        </td>
        <td class="col-xs-1">
          <select class="form-control" id="0_3" name="SeqOrder.Rows[0].ColumnValues[Type].Value" onchange="UpdateTable()">
            <option value="Cell pellet">Cell pellet</option>
            <option value="genomic DNA">genomic DNA</option>
            <option value="tail/ear clip">tail/ear clip</option>
            <option value="STR">STR</option>
          </select>
        </td>
        <td class="col-xs-1">
          <input class="form-control" id="0_4" name="SeqOrder.Rows[0].ColumnValues[Conc].Value" onchange="UpdateTable()" type="text" value="" />
        </td>
        <td class="col-xs-1">
          <select class="form-control" id="0_5" name="SeqOrder.Rows[0].ColumnValues[GEiC OrderID].Value" onchange="UpdateTable()">
            <option value="-2">*New Design*</option>
            <option value="-1">*STR Profile*</option>
          </select>

I have started off with something like this

<button onclick="downloadFunction()">Download</button>

<script>
function downloadFunction() {
    var x = document.getElementById("myTable");
}

</script>

Answer 1

If I slightly modify my general IIFE bookmarklet... It can read also input/select...

It shows tables found and you can choose its number in case there are more.

But there are size limits for prompt (in some browsers even 2000).

 (function () { var table = document.getElementsByTagName("TABLE"); var l = ''; for (var t = 0; t < table.length; t++) l += t + ':' + table[t].innerText.substr(0, 55).replace(/([\\r\\n])+/g, '\↲') + '\\n'; if (l) alert(l); table = (table.length > 1) ? (table[prompt('No ?', table.length - 1)]) : (table = table[table.length - 1]); var row, col, row0, res = []; for (var i = 0; row = table.rows[i]; i++) { var rec = []; for (var j = 0; col = row.cells[j]; j++) { const inputs = col.getElementsByTagName("INPUT"); const selects = col.getElementsByTagName("SELECT"); if (inputs.length) { rec.push(inputs[0].value) } else if (selects.length) { rec.push(selects[0].value) } else rec.push(col.innerText); } if (row0) res.push(rec.join('\\t')); else { row0 = rec; res.push(row0.join('\\t')); } } prompt("", res.join("\\r\\n")); } )();

 <table> <thead> <tr> <td><b title="Name or Index of the Vessel or Well">Well</b></td> <td><b title="Whatever name you want to give this sample">Sample Name</b></td> <td><b title="Type of Sample, select from Dropdown">Type</b></td> <td><b title="genomic DNA Concentration, in ng/ul (&gt;10). Not Required">Conc</b></td> <td><b title="Please enter which Previously-Used Order number the gRNA or Primers relate to. Entering this information will give you a discount since we don&#39;t need to make new amplicon primers.">GEiC OrderID</b></td> <td><b title="Species">Species</b></td> <td><b title="NCBI EntrezGene ID, or Official GeneSymbol">Gene ID</b></td> <td><b title="Sequence of the gRNA or feature you are searching for">gRNA Seq</b></td> <td><b title="What type of modification do you expect?">Mods (KI/KO)</b></td> <td><b title="Donor Sequence (if applicable)">Donor</b></td> </tr> </thead> <tbody> <tr> <td> <input name="SeqOrder.Rows[0].ColumnValues[Well].Value" type="text" value="A01" /> </td> <td> <input name="SeqOrder.Rows[0].ColumnValues[Sample Name].Value" type="text" value="" /> </td> <td> <select name="SeqOrder.Rows[0].ColumnValues[Type].Value"> <option value="Cell pellet">Cell pellet</option> <option value="genomic DNA">genomic DNA</option> <option value="tail/ear clip">tail/ear clip</option> <option value="STR">STR</option> </select> </td> <td> <input name="SeqOrder.Rows[0].ColumnValues[Conc].Value" type="text" value="" /> </td> <td> <select name="SeqOrder.Rows[0].ColumnValues[GEiC OrderID].Value"> <option value="-2">*New Design*</option> <option value="-1">*STR Profile*</option> </select> </td> </tr> </tbody> </table>

Original bookmarklet w/o edit fields:

javascript:(function(){var table=document.getElementsByTagName("TABLE");var l='';for(var t=0;t<table.length;t++)l+=t+':'+table[t].innerText.substr(0,55).replace(/([\r\n])+/g,'\u21b2')+'\n';if(l)alert(l);table=(table.length>1)?(table[prompt('No ?',table.length-1)]):(table=table[table.length-1]);var row,col,row0,res=[];for(var i=0;row=table.rows[i];i++){var rec=[];for(var j=0;col=row.cells[j];j++){if(!row0)rec.push(col.innerText);else{rec.push(col.innerText);}}if(row0)res.push(rec.join('\t'));else{row0=rec;res.push(row0.join('\t'));}}prompt("",res.join("\r\n"));})()