Question

我的代码：

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

Answer 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>

Jquery - 追加每个元素

1 个答案: