2017-03-03 2 views
0

exportieren Ich möchte eine Tabelle ausfüllen und es in CSV exportieren. Das Folgende ist mein CodeKann Tabelle nicht in CSV

<html> 
<head> 
    <title></title> 
</head> 
<body> 


<div class="container"> 
    <h1>Build Table</h1> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <div> 
     <table id="blacklistgrid"> 
      <tr id="Row1"> 
       <td>Week Number</td> 
       <td>Oranges Sold</td> 
       <td>Apples Sold</td> 
      </tr> 
      <tr class="Row2"> 
       <td> 
        <input type="text"/> 
       </td> 
       <td> 
        <input type="text"/> 
       </td> 
       <td> 
        <input type="text"/> 
       </td> 
      </tr> 
     </table> 
     <button type="button" id="btnAdd">Add Row!</button> 
     <button><a href="#" class="export">Export Table data into Excel</a></button> 
    </div> 

    <script> 
    jQuery(document).ready(function() { 
    jQuery('#btnAdd').click(function() { 
      jQuery(".Row2").clone().appendTo("#blacklistgrid"); 

     }); 
    }); 


$(document).ready(function() { 

    function exportTableToCSV($table, filename) { 

    var $rows = $table.find('tr:has(td)'), 

     // Temporary delimiter characters unlikely to be typed by keyboard 
     // This is to avoid accidentally splitting the actual contents 
     tmpColDelim = String.fromCharCode(11), // vertical tab character 
     tmpRowDelim = String.fromCharCode(0), // null character 

     // actual delimiter characters for CSV format 
     colDelim = '","', 
     rowDelim = '"\r\n"', 

     // Grab text from table into CSV formatted string 
     csv = '"' + $rows.map(function(i, row) { 
     var $row = $(row), 
      $cols = $row.find('td'); 

     return $cols.map(function(j, col) { 
      var $col = $(col), 
      text = $col.text(); 

      return text.replace(/"/g, '""'); // escape double quotes 

     }).get().join(tmpColDelim); 

     }).get().join(tmpRowDelim) 
     .split(tmpRowDelim).join(rowDelim) 
     .split(tmpColDelim).join(colDelim) + '"'; 

    // Deliberate 'false', see comment below 
    if (false && window.navigator.msSaveBlob) { 

     var blob = new Blob([decodeURIComponent(csv)], { 
     type: 'text/csv;charset=utf8' 
     }); 

     // Crashes in IE 10, IE 11 and Microsoft Edge 
     // See MS Edge Issue #10396033 
     // Hence, the deliberate 'false' 
     // This is here just for completeness 
     // Remove the 'false' at your own risk 
     window.navigator.msSaveBlob(blob, filename); 

    } else if (window.Blob && window.URL) { 
     // HTML5 Blob 
     var blob = new Blob([csv], { 
     type: 'text/csv;charset=utf-8' 
     }); 
     var csvUrl = URL.createObjectURL(blob); 

     $(this) 
     .attr({ 
      'download': filename, 
      'href': csvUrl 
     }); 
    } else { 
     // Data URI 
     var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); 

     $(this) 
     .attr({ 
      'download': filename, 
      'href': csvData, 
      'target': '_blank' 
     }); 
    } 
    } 

    // This must be a hyperlink 
    $(".export").on('click', function(event) { 
    // CSV 
    var args = [$('#blacklistgrid'), 'export.csv']; 

    exportTableToCSV.apply(this, args); 

    // If CSV, don't do event.preventDefault() or return false 
    // We actually need this to be a typical hyperlink 
    }); 
}); 


    </script> 

</body> 
</html> 

Ich kann die Tabelle füllen und Zeilen dynamisch hinzufügen. Ich kann jedoch nicht scheinen, die gefüllten Daten in die CSV-Datei zu exportieren. Was mache ich falsch?

Antwort

1

Da Sie Eingabeelemente verwenden, funktioniert die text() Methode nicht - im Wesentlichen gibt es nichts zwischen Ihren <td> Elementen. Stattdessen möchten Sie die val()-Methode verwenden, um den Text von diesem Eingabeelement abzurufen. Hier ein Beispiel für eine schnelle und schmutzige Anwendung: https://jsfiddle.net/dzy5ktv6/

Beachten Sie, dass ich den Selektor geändert habe, um input Elemente anstelle von td auszuwählen.