2017-03-20 18 views
1

ローカルcsvファイルをhtml tableにロードしようとしています。クロムにhtmlファイルをロードすると、コンテンツを表示できません。コンソールに "navigated to file:/// D:/report.html "。エラーメッセージはありません。js:noエラーが発生しましたが、ビューが表示されません。

$(document).ready(function() { 
 
    $.ajax({ 
 
    type: "GET", 
 
    url: "file:///D:/results.csv", 
 
    success: function(data) { 
 
     processData(data); 
 
    } 
 
    }); 
 
}); 
 

 
function processData(allText) { 
 
    var record_num = 2; 
 
    var allTextLines = allText.split(/\r\n|\n/); 
 
    var entries = allTextLines[0].split(','); 
 
    var lines = []; 
 
    var headings = entries.splice(0, record_num); 
 
    while (entries.length > 0) { 
 
    var tarr = []; 
 
    for (var j = 0; j < record_num; j++) { 
 
     tarr.push(headings[j] + ":" + entries.shift()); 
 
    } 
 
    lines.push(tarr); 
 
    } 
 
    var output = [], 
 
    i; 
 
    for (i = 0; i < lines.length; i++) 
 
    output.push("<tr><td>" + 
 
     lines[i].slice(0, -1).split(",").join("</td><td>") + 
 
     "</td></tr>"); 
 
    output = "<table>" + output.join("") + "</table>"; 
 
    var div = document.getElementById('container'); 
 
    div.innerHTML = output; 
 
}
table { 
 
    border-collapse: collapse; 
 
    border: 2px black solid; 
 
    font: 12px sans-serif; 
 
    align-content: center; 
 
} 
 

 
td { 
 
    border: 1px black solid; 
 
    padding: 5px; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body> 
 
    <div id='container'></div> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
</body> 
 
</html>

私がミスをしたところ、私は見つけることができません。 ありがとうございます。

+0

最初のエラーのためにあなたのコンソールをチェックしてください。 – Rex

+0

私は前に同様の質問に答えました。それはあなたのために役立つのですか? http://stackoverflow.com/a/42648408/4831179ところで、どのようにウルのクロームでこのページを開いたのですか?そのURLは何ですか?それは重要です。 – blackmiaool

+0

@VinaySinghエラーはありません。ただ、 "ファイル:/// D:/report.htmlにナビゲート"と書いてあります。 –

答えて

0

これは正しいコードです。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
      <style> 
       table { 
       border-collapse: collapse; 
       border: 2px black solid; 
       font: 12px sans-serif; 
       } 
       td { 
       border: 1px black solid; 
       padding: 5px; 

       } 
      </style> 
    </head> 
    <body> 
    <div id='container'></div> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "./results.csv", 
     success: function(data) {processData(data);} 
    }); 
}); 

function processData(allText) { 
    var lines = []; 
    var tarr = []; 
    var val; 
    var record_num = 2; 
    var allTextLines = allText.split(/\r\n|\n/); 
    for (var k = 0;k < allTextLines.length-1;k++){ 
      var entries = allTextLines[k].split(','); 
      var headings = entries.splice(0,record_num); 
      while (headings.length>0) { 
      for (var j=0; j<record_num; j++) { 
       val = headings.shift(); 
       tarr.push(val); 
       } 
      } 
    } 
    var output = [], 
     i; 
     for (i = 0; i < tarr.length-1; i++){ 
     output.push("<tr><td>"+ tarr[i].replace('"',"").slice(0,-1) + "</td><td>"+ tarr[i+1].replace('"',"").slice(0,-1) //my requirement is two columns 
      + "</td></tr>"); 
     i++; 
     } 
     output = "<table>" + output.join("") + "</table>"; 
     var div = document.getElementById('container'); 
     div.innerHTML = output; 
} 

    </script> 
    </body> 

関連する問題