CSV行の並べ替え

Question

私は基本的にCSVを読み込み、CSV行の内容を並べ替えるべきであるテーブルを出力する必要があるこのコードを持っています！

例：

fish;4;1;33 魚は4

dog;5;2;66 犬が、問題はそれが何も印刷されないということである第二行5列

であるべき1行列でなければなりませんコンソールでもどちらでもない！私が間違っている場所を教えてもらえますか？どのような変更を行う必要がありますか？

マイコード：だから

function processFile() { 

     var fileSize = 0; 
     var theFile = document.getElementById("myFile").files[0]; 

     if (theFile) { 

      var table = document.getElementById("myTable"); 
      var headerLine = ""; 
      var myReader = new FileReader(); 

      myReader.onload = function(e) { 

       var content = myReader.result; 
       var lines = content.split("\r"); 

       for (var i = 0; i <lines.length; i++) 
       { 
        document.write("<th>"); 
        document.write("&nbsp;&nbsp;&nbsp;&nbsp;"); 
        document.write("</th>"); 
       } 
       for (var i = 0; i <lines.length; i++) 
       { 
        document.write("<tr>"); 
         for (var j = 0; j <lines.length; j++) 
         { 
         document.write("<td>"); 
         document.write("&nbsp;"); 
         document.write("</td>"); 
         } 
        document.write("</tr>"); 
       } 

       function insertData(id, content) { 

        var dataRows = content.split("\r"); 
        if (table) { 
         dataRows.forEach(function(s) { 
           var x = s.split(';'); 
           table.rows[x[2]].cells[x[1]].textContent = x[0]; 
         }); 
         } 
       } 
      } 
      myReader.readAsText(theFile); 
     } 
     return false; 
} //end 

Answer 1

、私は大きな例であなたのために再びすべてをしました。 私はあなたのコードでそれを扱うことができる、または例で私のことを取ることができると思います。ここで

は、安全に、あなたのケースで使用できる主な機能です：

 //for swapping values 
     function swap(arr, a, b){ 
      var tmp = arr[a]; 
      arr[a] = arr[b]; 
      arr[b] = tmp; 
      return arr; 
     } 

     //for reorder lines a<=>b 
     function reorderLine(csvArray,a,b){ 
      return swap(csvArray,a,b); 
     } 

     //for reorder one col values a<=>b 
     function reorderColumn(csvLine,a,b){ 
      return swap(csvLine.split(";"),a,b).join(';'); 
     } 

     // create a table with csv data 
     function csvArrayToTable(csvArray,selectorId){ 
      var html = ["<table cellpadding='10' border='1'>"]; 
      csvArray.map(function(lines){ 
       html.push("<tr>"); 
       var cols = lines.split(";"); 
       html.push("<th>"+cols[0]+"</th>"); 
       cols.shift(); 
       cols.map(function(val){ 
        html.push("<td>"+val+"</td>"); 
       }); 
       html.push("</tr>"); 
      }); 
      html.push("</table>"); 
      document.getElementById(selectorId).innerHTML = html.join(''); 
     } 

と作業の例では、アップロードファイルが含まれている、あまりにも使用することができます（の下部に実行コードスニペットをクリックしてくださいポスト、およびテストするためのフルページ）：

//for swapping values 
 
function swap(arr, a, b){ 
 
\t var tmp = arr[a]; 
 
\t arr[a] = arr[b]; 
 
\t arr[b] = tmp; 
 
\t return arr; 
 
} 
 

 
//for reorder lines a<=>b 
 
function reorderLine(csvArray,a,b){ 
 
\t console.log('reorderLine',csvArray,a,b); 
 
\t return swap(csvArray,a,b); 
 
} 
 

 
//for reorder one col values a<=>b 
 
function reorderColumn(csvLine,a,b){ 
 
\t console.log('reorderColumn',csvLine,a,b); 
 
\t return swap(csvLine.split(";"),a,b).join(';'); 
 
} \t 
 

 
// create a table with csv data 
 
function csvArrayToTable(csvArray,selectorId){ 
 
\t var html = ["<table cellpadding='10' border='1'>"]; 
 
\t csvArray.map(function(lines){ 
 
\t \t html.push("<tr>"); 
 
\t \t var cols = lines.split(";"); 
 
\t \t html.push("<th>"+cols[0]+"</th>"); 
 
\t \t cols.shift(); 
 
\t \t cols.map(function(val){ 
 
\t \t \t html.push("<td>"+val+"</td>"); 
 
\t \t }); 
 
\t \t html.push("</tr>"); 
 
\t }); 
 
\t html.push("</table>"); 
 
\t document.getElementById(selectorId).innerHTML = html.join(''); 
 
} 
 

 
// init element 
 
var rawCsvFile = document.getElementById("csvInput"); 
 
var rawCsv = document.getElementById("rawCsv"); 
 
var reorderedRawCsv = document.getElementById("reorderedRawCsv"); 
 
var lines = document.getElementById("lines"); 
 
var lineA = document.getElementById("lineA"); 
 
var lineB = document.getElementById("lineB"); 
 
var colA = document.getElementById("colA"); 
 
var colB = document.getElementById("colB"); 
 
var apply = document.getElementById("apply"); 
 
var reset = document.getElementById("reset"); 
 
var rawCsvData, reorderCsvData; 
 

 
// file uploaded 
 
rawCsvFile.addEventListener("change", function() { 
 

 
\t // reader 
 
\t var reader = new FileReader(); 
 

 

 

 
\t // the file is loaded 
 
\t reader.onload = function(e) { 
 

 
\t \t // cancel if undefined 
 
\t \t if(!reader.result || typeof reader.result != "string") return; 
 

 
\t \t // Get result from new FileReader() 
 
\t \t rawCsvData = reader.result.split(/[\r\n]+/g); // split lines 
 
\t \t rawCsv.innerHTML = reader.result; // show in textarea 
 
\t \t reorderedRawCsvData = rawCsvData; // clone data at start 
 

 
\t \t function showCsvValueInForm(){ 
 

 
\t \t \t // empty fields 
 
\t \t \t lines.innerHTML = ""; 
 
\t \t \t lineA.innerHTML = ""; 
 
\t \t \t lineB.innerHTML = ""; 
 
\t \t \t colA.innerHTML = ""; 
 
\t \t \t colB.innerHTML = ""; 
 

 
\t \t \t // Show in Raw CSV textarea 
 
\t \t \t reorderedRawCsv.innerHTML = reorderedRawCsvData.join("\r\n"); 
 

 
\t \t \t // Add All option in On 
 
\t \t \t var toAll = document.createElement('option'); 
 
\t \t \t toAll.value = "all"; 
 
\t \t \t toAll.innerHTML = "All"; 
 
\t \t \t lines.appendChild(toAll); 
 

 
\t \t \t // handle line change 
 
\t \t \t reorderedRawCsvData.map(function(val,i){ \t \t \t \t 
 
\t \t \t \t var lineOpt = document.createElement('option'); 
 
\t \t \t \t lineOpt.value = i; 
 
\t \t \t \t lineOpt.innerHTML = i + " - " +(val.split(';'))[0]; 
 
\t \t \t \t // add options in line selects 
 
\t \t \t \t lines.appendChild(lineOpt.cloneNode(!!1)); 
 
\t \t \t \t lineA.appendChild(lineOpt.cloneNode(!!1)); 
 
\t \t \t \t lineB.appendChild(lineOpt); 
 
\t \t \t }); 
 

 
\t \t \t // handle col change 
 
\t \t \t var nCol = rawCsvData[0].split(';'); 
 
\t \t \t nCol.map(function(val,i){ 
 
\t \t \t \t var colOpt = document.createElement('option'); 
 
\t \t \t \t colOpt.value = i; 
 
\t \t \t \t colOpt.innerHTML = i; 
 
\t \t \t \t // add options in col selects 
 
\t \t \t \t colA.appendChild(colOpt.cloneNode(!!1)); 
 
\t \t \t \t colB.appendChild(colOpt); 
 
\t \t \t }); 
 

 
\t \t \t // create table 
 
\t \t \t csvArrayToTable(reorderedRawCsvData,"reorderedCsvTable"); 
 

 
\t \t } 
 

 
\t \t // fill select, option and table with the reordered csv data 
 
\t \t showCsvValueInForm(); 
 

 
\t \t // apply event, change the order 
 
\t \t apply.addEventListener("click", function() { 
 

 
\t \t \t // reordering line 
 
\t \t \t var lineAOpt = lineA.options[lineA.selectedIndex].value; 
 
\t \t \t var lineBOpt = lineB.options[lineB.selectedIndex].value; 
 
\t \t \t if(lineAOpt !== lineBOpt) reorderedRawCsvData = reorderLine(reorderedRawCsvData,lineAOpt,lineBOpt); 
 

 
\t \t \t // reordering col (all or only one) 
 
\t \t \t var colAOpt = colA.options[colA.selectedIndex].value; 
 
\t \t \t var colBOpt = colB.options[colB.selectedIndex].value; 
 
\t \t \t if(colAOpt !== colBOpt) 
 
\t \t \t \t if(lines.value == "all"){ 
 
\t \t \t \t \t reorderedRawCsvData = reorderedRawCsvData.map(function(val,i){ 
 
\t \t \t \t \t \t return reorderColumn(val,colAOpt,colBOpt); 
 
\t \t \t \t \t }); 
 
\t \t \t \t }else{ 
 
\t \t \t \t reorderedRawCsvData[lines.value] = reorderColumn(reorderedRawCsvData[lines.value],colAOpt,colBOpt); 
 
\t \t \t \t } 
 

 
\t \t \t // fill again 
 
\t \t \t showCsvValueInForm(); 
 

 
\t \t }); 
 

 
\t \t // reset the form with raw values 
 
\t \t reset.addEventListener("click", function() { 
 

 
\t \t \t if (confirm("Are you sure ?")) { 
 
\t \t \t \t // reset 
 
\t \t \t \t reorderedRawCsvData = rawCsvData; 
 
\t \t \t \t // fill again 
 
\t \t \t \t showCsvValueInForm(); 
 
\t \t \t } 
 

 
\t \t }); 
 

 
\t } 
 

 
\t // read the uploaded csv file as text 
 
\t reader.readAsText(event.target.files[0], 'utf-8'); 
 

 
});

body { padding:10px; background:#eee; text-align: left; font-family: sans-serif; } 
 
fieldset { width:80%; background:#fff; }

<html> 
 

 
\t <head> 
 
\t \t <title>CSV Reorder</title> 
 

 
\t </head> 
 
\t 
 
\t 
 
\t <body> 
 
\t \t 
 
\t \t <h1>Reorder CSV</h1> 
 
\t \t <fieldset> 
 
\t \t \t <h3>Step 1 - Raw CSV</h3> 
 
\t \t \t <small>Load a CSV file (not nested)</small> 
 
\t \t \t <br /> 
 
\t \t \t <input type="file" id="csvInput"> 
 
\t \t \t <br /> 
 
\t \t \t <br /> 
 
\t \t \t <div> 
 
\t \t \t \t <textarea id="rawCsv" placeholder="Waiting for a file..."></textarea> 
 
\t \t \t </div> 
 
\t \t </fieldset> 
 
\t \t <br /> 
 
\t \t 
 
\t \t <fieldset> 
 
\t \t \t <h3>Step 2 - Reordering Option</h3> 
 
\t \t \t <small>Choose how to order the CSV data</small> 
 
\t \t \t <br /> 
 
\t \t \t <table> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Line</td> 
 
\t \t \t \t \t <td><select id="lineA"></select></td> 
 
\t \t \t \t \t <td><=></td> 
 
\t \t \t \t \t <td><select id="lineB"></select></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>Column</td> 
 
\t \t \t \t \t <td><select id="colA"></select></td> 
 
\t \t \t \t \t <td><=></td> 
 
\t \t \t \t \t <td><select id="colB"></select></td> 
 
\t \t \t \t \t <td>on</td> 
 
\t \t \t \t \t <td><select id="lines"></select></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td colspan="4"><button id="apply">Apply</button>&nbsp;<button id="reset">Reset</button></td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> \t 
 
\t \t </fieldset> 
 
\t \t <br /> 
 

 
\t \t <fieldset> 
 
\t \t \t <h3>Step 3 - Reordered CSV</h3> 
 
\t \t \t <small>Get the reordered values</small> 
 
\t \t \t <br /> 
 
\t \t \t <div> 
 
\t \t \t <textarea id="reorderedRawCsv" placeholder="Waiting for options..."></textarea> 
 
\t \t \t </div> 
 
\t \t \t <div> 
 
\t \t \t \t <h3>Reordered CSV in a table</h3> 
 
\t \t \t \t <div id="reorderedCsvTable"> 
 
\t \t \t \t \t <small>Waiting for a file..</small> 
 
\t \t \t \t \t <br /> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </fieldset> 
 
\t \t \t 
 
\t 
 
\t </body> 
 
</html>

楽しい ！