Question

我正在使用python爬虫的结果为CSV文件创建一个非常简单的Web UI。 UI需要在不同的div标签中单独显示每行的内容。用户按下按钮后需要随机选择该行。然后，这将显示从CSV文件中选择的数据。

虽然我对其他编程语言有一些经验，但我对JavaScript很陌生。

我目前的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.12.3.min.js" type="text/javascript">
</script>
<title>Untitled Document</title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#wrap { width:500px; height:500px; margin:20px;  }
</style>
</head>

<body>

<button onclick="myFunction()">Click me</button>

<div id="wrap" style="background-color:#666; height:100%; width:100%">
</div><!-- end wrap -->

<script type="text/javascript">
 $.get('testResults.csv', function myFunction(data) {
    var build = '<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="100%">\n';
    var rows = data.split("\n");
    rows.forEach( function getvalues(thisRow) {
    build += "<tr>\n";
    var columns = thisRow.split(",");
    for(var i=0;i<columns.length;i++){ build += "<td>" + columns[i] + "</td>\n"; }
    })
    build += "</table>";
    $('#wrap').append(build);
 });
</script>

</body>
</html>

我在网上找到了这个特殊的代码块，并且无法输出单行而不是整个CSV文件作为表格。

优选地，按钮（不起作用）将运行将行中的每个值解析为我可以在HTML中拾取的id或类的代码（不需要输出作为表）。至于指定某些值，我可以再写一些if语句。

CSV文件：http://www.filedropper.com/testresults

谢谢！

Answer 1

从概念上讲，你走的是正确的道路，最大的问题是：

您需要一个名为 myFunction
您可能不希望 $。get（）

myFunction

此演示使用 reduce（），因为我热衷于此而不是通过 forEach（）构建字符串，但您的原始策略没有错。

最初，这个演示每次单击按钮时都会获取csv然后选择一个随机行来显示。我重构了一点，只支持获取远程数据一次。

// ============================
// Allow for a cached result
// ============================
var csvRows = [];
// ============================

// ============================
// Given an array of rows build a table.
// ============================
function buildTable(csvRows){
  // Our base result
  var $table = $("<table cellpadding=\"2\" cellspacing=\"0\"></table>");

  // ============================
  // For each row in the CSV build a <tr /> and append it to the <table />
  // ============================
  $table = csvRows.reduce(function($table, csvRow){

    // For this demo just take the first few cells/columns
    var csvRowCells = csvRow.split(",").slice(0, 4);

    // Our base table row
    var $tr = $("<tr>/tr>");

    // ============================
    // For each cell row build a <td /> and append it to the <tr />
    // ============================
    $tr = csvRowCells.reduce(function($tr, csvRowCell){
      return $tr.append($("<td>/</td>").text(csvRowCell));
    }, $tr);
    // ============================

    // Add our new <tr /> to the table then return the table
    return $table.append($tr);
  }, $table);
  // ============================

  return $table;
}
// ============================

// ============================
// Given an array of rows, randomly select one (as an array) and build a table with it.
// ============================
function fillContainerWithTable(csvRows, $container){
  var randomRow = [csvRows[Math.floor(Math.random() * csvRows.length)]];
  var $table = buildTable(randomRow);
  $container.append($table);
}
// ============================

// ============================
// the click handler
// ============================
function myFunction(){
  // some random csv I found...
  var uri = "https://docs.google.com/spreadsheets/d/1VNgGeM-dZ_1XpMLNzggwvRD3sRriNAGbMYwuv3ys68Y/pub?output=csv";
  var $container = $("#wrap");

  // You probably want a clean slate.
  $container.empty();

  // ============================
  // If we have the data locally already just use it.
  // ============================
  if (csvRows.length !== 0){
    console.log("using local data...");
    fillContainerWithTable(csvRows, $container);
    return;
  }
  // ============================

  console.log("fetching remote data...");

  $.get(uri, function(data){
    csvRows = data.split("\n");
    fillContainerWithTable(csvRows, $container);
  });
}
// ============================

body {
  font-family: arial, helvetica, sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: #000;
  text-align: left;
  margin: 3px 0px;
}

#wrap {
  padding: 20px;
}

#wrap table {
  border: solid 1px;
  border-collapse: collapse;
  background-color: aliceblue;
  width: 100%;
}

<button onclick="myFunction()">Click me</button>
<div id="wrap"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在JavaScript中从CSV文件中提取单行

1 个答案: