2016-09-08 117 views
-2

我的代码:jQuery的 - 每追加一个元素

这是我的CSV文件:

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

这是我的jquery文件:

$(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标签我希望它将所有元素放在TR标签中的一行中。

这是我的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'中追加'td'元素到'tr'。 –

回答

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>