2016-09-08 5 views
-2

マイコードを追加:jQueryの - 各要素

これは私のCSVファイルです:

Item, Quantity, Price; 
LED, 100, $10; 
PIR, 1, $5; 
DS18B20, 10, $5; 

これは私のjqueryのファイル:このコードは、TRタグにすべての要素を置く

$(document).ready(function() { 
    $.ajax({ 
    url: "data.csv", 
    success: function(result) { 
     var data = result; 
     var arr = data.split(";"); 
     var len = arr.length - 1; 
     var a = 0; 
     var b = 0; 
     while (a < len) { 
     var orr = arr[a].split(","); 
     var err = orr.length; 
     b = 0; 
     while (b < err) { 
      if (a == 0) { 
      $("#table").find('table') 
       .append($('<tr>') 
       .append($('<th>' + orr[b] + '</th>')) 
      ); 
      b = b + 1; 
      } else if (a > 0) { 
      $("#table").find('table') 
       .append($('<tr>') 
       .append($('<td>' + orr[b] + '</td>')) 
      ); 
      b = b + 1; 
      }; 
     }; 
     a = a + 1; 
     }; 
    } 
    }); 
}); 

TRタグ内のすべての要素を1行に入れたいと思っています。

これは私のHTMLファイルです:あなたはそれを読みやすくしていないのはなぜ

<!DOCTYPE html> 
<html> 
<head> 
<title>tables</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="myjquery.js"> 
</head> 
<body> 
<div id="table"> 
<table> 
</table> 
</div> 
</body> 
</html> 
+1

? '#IndentationFail' –

+0

何とか問題を再現できますか? –

+1

コードを修正して外側の 'while'に' tr'を作成し、 'while'の' tr'に 'td'要素を追加します。 –

答えて

0

var csv = 'Item, Quantity, Price;' + 
 
      'LED, 100, $10;' + 
 
      'PIR, 1, $5;' + 
 
      'DS18B20, 10, $5;'; 
 

 
$(document).ready(function() { 
 
    var arrCsv = csv.split(';'); 
 
    var result = ''; 
 
    
 
    $.each(arrCsv, function(key, val) { 
 
    if (val.trim() !== '') { 
 
     var arrCols = val.split(','); 
 
    
 
     result += '<tr>'; 
 
    
 
     $.each(arrCols, function(idx, value){ 
 
     result += (key == 0 ? '<th>' : '<td>') + value + (key == 0 ? '</th>' : '</td>'); 
 
     }); 
 
    
 
     result += '</tr>'; 
 
    } 
 
    }); 
 
    
 
    $('table').append(result); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table border="1" width="100%"> 
 
</table>

関連する問題