CSV無法導入

我正在嘗試創建一個csv編輯器。我想導入一個CSV並將其轉換爲HTML表格。這是以下代碼：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> 
    <input type="file" id="file" name="file"> 
    <div> 
     <table id="blacklistgrid"> 

      <tr class="Row"> 
       <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> 

function parseResult(result) { 
    var resultArray = []; 
    result.split("\n").forEach(function(row) { 
     var rowArray = []; 
     row.split(",").forEach(function(cell) { 
      rowArray.push(cell); 
     }); 
     resultArray.push(rowArray); 
    }); 
    return resultArray; 
} 

function createTable(array) { 
    var content = ""; 
    array.forEach(function(row) { 
     content += "<tr>"; 
     row.forEach(function(cell) { 
      content += "<td><input type=\"text\" value=\"" + cell + "\"/></td>" ; 
     }); 
     content += "</tr>"; 
    }); 
    document.getElementById("#blacklistgrid").innerHTML = content; 
} 

     jQuery(document).ready(function() { 
    jQuery('#btnAdd').click(function() { 
      jQuery(".Row").clone().appendTo("#blacklistgrid"); 

     }); 

     var file = document.getElementById('file'); 
file.addEventListener('change', function() { 
    var reader = new FileReader(); 
    var f = file.files[0]; 
    reader.onload = function(e) { 
     var CSVARRAY = parseResult(e.target.result); //this is where the csv array will be 
     createTable(CSVARRAY); 
    }; 
    reader.readAsText(f); 
}); 

    }); 


$(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('input'); 

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

      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>

我無法使導入功能正常工作。並且，這些錯誤如下：

Uncaught TypeError: Cannot set property 'innerHTML' of null 
    at createTable ((index):54) 
    at FileReader.reader.onload ((index):69)

我在做什麼錯？

來源

2017-03-03 Echchama Nayak

僅供參考，'row.split（「」）的forEach（...）'可以只是'rowArray = row.split（「，」）;' – Barmar

你永遠不會調用'createTable（CSVARRAY）;' – Barmar

請勿將#置於document.getElementById的參數中。它應該是：

document.getElementById("blacklistgrid").innerHTML = content;

或使用jQuery：

$("#blacklistgrid").html(content);

來源

2017-03-03 22:36:57 Barmar

你會得到什麼錯誤？ – Barmar

對不起，我再次編輯它 –

感謝它的工作。但是，加載csv後添加行不起作用？ –

回答

相關問題