テーブルに表示されている不要なtdを消去する方法

Question

私はここでばかげた質問をしています。 私はテーブルにデータを表示するのにbootstrap.min.jsを使用しています。 しかし、最後の行に表示されている不要なtdがあります。どのように私は不要なtd私のテーブルの最後の行に表示されることをクリアすることができますか？

誰でも私の質問に答えがありますか？これを解決するために私を助けてください。

データを示すために、この私のコードやテーブル

script type="text/javascript"> 
 
    $(document).ready(function(){ 
 
\t 
 
    $('#submit-file').on("click",function(e){ 
 
\t \t e.preventDefault(); 
 
\t \t $('#files').parse({ 
 
\t \t \t config: { 
 
\t \t \t \t delimiter: "", 
 
\t \t \t \t complete: displayHTMLTable, 
 
\t \t \t }, 
 
\t \t \t before: function(file, inputElem) 
 
\t \t \t { 
 
\t \t \t \t //console.log("Parsing file...", file); 
 
\t \t \t }, 
 
\t \t \t error: function(err, file) 
 
\t \t \t { 
 
\t \t \t \t //console.log("ERROR:", err, file); 
 
\t \t \t }, 
 
\t \t \t complete: function() 
 
\t \t \t { 
 
\t \t \t \t //console.log("Done with all files"); 
 
\t \t \t } 
 
\t \t }); 
 
    }); 
 
\t 
 
\t function displayHTMLTable(results){ 
 
\t \t var table = "<table class='table table-bordered'>"; 
 
\t \t var data = results.data; 
 
\t \t 
 
\t \t for(i=0;i<data.length;i++){ 
 
\t \t \t table+= "<tr>"; 
 
\t \t \t var row = data[i]; \t 
 
\t \t \t var cells = row.join(",").split(","); 
 
\t \t \t for(j=0;j<cells.length;j++){ 
 
\t \t \t \t table+= "<td>"; 
 
\t \t \t \t table+= cells[j]; 
 
\t \t \t \t table+= "</td>"; 
 
\t \t \t } 
 
\t \t \t table+= "</tr>"; 
 
\t \t } 
 
\t \t table+= "</table>"; 
 
\t \t $("#parsed_csv_list").html(table); 
 
\t } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script> 
 

 
<div class="container" style="padding:5px 5px; margin-left:5px"> 
 
\t <div class="well" style="width:70%"> 
 
\t \t <div class="row"> 
 
\t \t <form class="form-inline"> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t <label for="files">Upload File Data :</label> 
 
\t \t \t <input type="file" id="files" class="form-control" accept=".csv" required /> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t <button type="submit" id="submit-file" class="btn btn-primary">Upload File</button> 
 
\t \t \t </div> 
 
\t \t </form> 
 
\t \t </div> 
 
\t \t <div class="row"> 
 
\t \t \t 
 
\t \t \t <div id="parsed_csv_list" class="panel-body table-responsive" style="width:800px"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="footer"></div> 
 
    </div>

、これは私がそれを確認したときに、私が持っている不要なtr and td showing

これで作成検査要素

私はあなたが持っている列の数を確認する必要があります。この

function displayHTMLTable(results){ 
 
\t \t var table = "<table class='table table-bordered'>"; 
 
\t \t var data = results.data; 
 

 
\t \t for(i=0;i<=data.length;i++){ 
 
\t \t \t if(data[i].trim().length > 1)// check added here 
 
      { 
 
\t \t \t table+= "<tr>"; 
 
\t \t \t var row = data[i]; \t 
 
\t \t \t var cells = row.join(",").split(","); 
 
\t \t \t for(j=0;j<cells.length;j++){ 
 
\t \t \t \t table+= "<td>"; 
 
\t \t \t \t table+= cells[j]; 
 
\t \t \t \t table+= "</td>"; 
 
\t \t \t } 
 
\t \t \t table+= "</tr>"; 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t } 
 
\t \t } 
 
\t \t table+= "</table>"; 
 
\t \t $("#parsed_csv_list").html(table); 
 
\t } \t 
 
    });

Answer 1

に私のコードを編集してみてください： "アップロードしたCSV doesntのは、余分な持っていることを確認してください

function displayHTMLTable(results){ 
    var table = "<table class='table table-bordered'>"; 
    var data = results.data; 

    var size = -1; 
    for(i=0;i<data.length;i++){ 
     var row = data[i]; 
     var cells = row.join(",").split(","); 
     if (cells.length < size) continue; 
     else if (cells.length > size) size = cells.length; 
     table+= "<tr>"; 
     for(j=0;j<cells.length;j++){ 
      table+= "<td>"; 
      table+= cells[j]; 
      table+= "</td>"; 
     } 
     table+= "</tr>"; 
    } 
    table+= "</table>"; 
    $("#parsed_csv_list").html(table); 
}