我正在为 CSV 文件制作一个非常简单的 Web UI，其中包含 python 爬虫的结果。 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
谢谢!
最佳答案
从概念上讲，您走在正确的道路上，最大的问题是:
- 您需要定义一个名为 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 - 使用 JavaScript 从 CSV 文件中提取单行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39257387/