Question

我有一个用HTML和JavaScript编写的表，按下按钮时需要将其内容下载到.csv文件中。

这是我的表的样子（很多代码被省略）：

<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>

我从这样的事情开始

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

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

</script>

Answer 1

如果我略微修改了一般的IIFE小书签... 它也可以读取输入/选择...

它显示找到的表，如果有更多表，您可以选择其编号。

但是提示的大小是有限制的（在某些浏览器中甚至是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, '\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++) {
            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>

没有编辑字段的原始书签：

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"));})()

下载``作为CSV文件

1 个答案: