Jquery - 附加每个元素答案

【问题标题】：Jquery - appending each elementJquery - 附加每个元素
【发布时间】：2017-01-16 02:57:31
【问题描述】：

我的代码：

这是我的 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>

【问题讨论】：

为什么不让它可读？ #IndentationFail
你能以某种方式复制这个问题吗？
修改您的代码以在外部while 中创建tr 并在内部while 中将td 元素附加到tr。
@Praveen Kumar 我很抱歉我是 jquery 的新手
@TechDinoKing 是的，试着缩进，这是一个很好的编码实践。它不与 jQuery 相关。

标签： jquery html ajax csv html-table

【解决方案1】：

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>

【讨论】：