需要将CSV导入html/javascript并在datalist中使用
需要将CSV导入html/javascript并在datalist中使用
提问于 2018-06-30 01:37:35
我正在自学html/css/javascript编程，以帮助提高我自己的工作效率(我在一所大学招收研究生，目前这一切都是在纸上完成的。我想把这个放到网页上，这样每个人都能更容易地参与其中。)
抱歉，这有点乱：
.Add {
overflow: auto;
display: inline-block;
padding: 10px;
width: calc(65% - 10px);
border: 1px solid;
background-color: rgba(255, 255, 255, .75)
}
.Add input {
width: 100%;
vertical-align:top;
}
.Add button {
margin:10px;
margin-left: 44px;
}
.Add td {
border: 1px solid;
} <div class="CourseInfo">
<div class="Add">
<span>
COURSES TO BE ADDED:
<table>
<tbody>
<tr>
<th style="width: 5%">Class #</th>
<th style="width: 40%;">Course Title</th>
<th style="width: 20%;">Catalog Number</th>
<th style="width: 10%;">Units/ Credits</th>
<th style="width: 5%;">*Days</th>
<th style="width: 5%;">*Time</th>
<th style="width: 5%;">*Bldg/Rm</th>
<th style="width: 10%;">Variable Credits?</th>
</tr>
<div id="courseTable">
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<option value="a Class 1">
<option value="a Class 2">
<option value="b Class 3">
<option value="b Class 4">
<option value="Class 5">
</datalist></td>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</div>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<option value="a Class 1">
<option value="a Class 2">
<option value="b Class 3">
<option value="b Class 4">
<option value="Class 5">
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<option value="a Class 1">
<option value="a Class 2">
<option value="b Class 3">
<option value="b Class 4">
<option value="Class 5">
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<option value="a Class 1">
<option value="a Class 2">
<option value="b Class 3">
<option value="b Class 4">
<option value="Class 5">
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<option value="a Class 1">
<option value="a Class 2">
<option value="b Class 3">
<option value="b Class 4">
<option value="Class 5">
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<option value="a Class 1">
<option value="a Class 2">
<option value="b Class 3">
<option value="b Class 4">
<option value="Class 5">
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
下面是我正在使用的完整小提琴：https://jsfiddle.net/frodomeg/0kLmoan4/
在显示要添加或删除的课程的部分(在代码片段中)，我有一个替代数据列表。我希望能够做的是导入我们系下学期的课程列表(我从系网站下载到.xls文件中，然后转换为.csv)，并将其显示在数据列表中供学生选择。
现在，如果有更好的东西，它不一定是.csv，我只是不确定还有什么可以工作。
因为我是个新手，在提交给我的老板批准开始生产之前，我完全是胡乱写的，如果我不需要下载任何外部程序就能做到这一点，那将是最有帮助的。或者如果我必须通过外部程序下载，你能告诉我如何将它添加到小提琴中吗？
任何帮助都是非常感谢的！
谢谢
回答 3
Stack Overflow用户
发布于 2018-06-30 02:28:35
对我来说，这种需求听起来更适合服务器端语言，如PHP，而不是客户端语言，如Javascript。
使用服务器端语言，您可以轻松访问服务器上的文件(这将允许您在必要时轻松地编辑文件，而不需要额外的代码)，例如此CSV，解析它并将其呈现为用户的网页的一部分。
例如，以下是适用于您的用例的PHP代码：
<?php
$filename = "test.csv"; //example name for your CSV file with classes - this file would exist in the same directory as this PHP file
$classArray = array(); //declare an array to store your classes
if (($handle = fopen($filename, "r")) !== FALSE) {
while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
foreach($data as $v) { //loop through the CSV data and add to your array
array_push($classArray, $v);
}
}
}
?>
<div class="CourseInfo">
<div class="Add">
<span>
COURSES TO BE ADDED:
<table>
<tbody>
<tr>
<th style="width: 5%">Class #</th>
<th style="width: 40%;">Course Title</th>
<th style="width: 20%;">Catalog Number</th>
<th style="width: 10%;">Units/ Credits</th>
<th style="width: 5%;">*Days</th>
<th style="width: 5%;">*Time</th>
<th style="width: 5%;">*Bldg/Rm</th>
<th style="width: 10%;">Variable Credits?</th>
</tr>
<div id="courseTable">
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php
for ($i = 0; $i < count($classArray); $i++) { // this is embedded PHP that allows you to loop through your array and echo the values of the PHP array within an HTML option tag
echo "<option value='$classArray[$i]'>";
}
?>
</datalist></td>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</div>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php
for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";
}
?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php
for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";
}
?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php
for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";
}
?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php
for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";
}
?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<?php
for ($i = 0; $i < count($classArray); $i++) {
echo "<option value='$classArray[$i]'>";
}
?>
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>我假设，如果你计划让用户/学生访问一个网页，你一定有一台web服务器来托管你的文件。如果你的web服务器上目前还没有PHP，那么安装它应该不难。这里有一个来自PHP.net的链接，描述了如何在几个不同的操作系统上安装PHP：
Stack Overflow用户
发布于 2018-06-30 03:02:09
这不是一个解决方案，而是建议您可以对所有输入重用相同的datalist。我的两点意见。下面的链接显示，您并不真正需要同一个datalist的这么多实例。
https://jsfiddle.net/0kLmoan4/7/
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<datalist id="courses">
<option value="a Class 1">
<option value="a Class 2">
<option value="b Class 3">
<option value="b Class 4">
<option value="Class 5">
</datalist></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>##</td>
<td><input list="courses" name="course" placeholder="Course">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>其次，CSV听起来不错。只要你能读懂就行。现在你已经在一个javascript变量中阅读了它，遵循上面的教程，如其中一个注释中的"bowl0stu“所建议。
您可以使用循环在运行时生成所有的datalist选项。如果你能分享你的CSV的结构。我可以为您提供一个伪代码，说明如何使用动态生成的所有选项生成datalist的html。
Stack Overflow用户
发布于 2018-06-30 06:07:34
我猜HTML5中的FileReader是个新东西。这是一个从CSV文件中加载表的模型。
<html>
<head>
<style>
td { width:100px; border:1px solid black; }
</style>
<script>
"use strict";
function doit1() {
/* this assumes the file selected is like:
alpha, 12345
beta, 98765
*/
var file = document.getElementById('fileid').files[0]; // selected file
// you can't hard code the file -- user has to select it.
var reader = new FileReader(); // new in HTML5
reader.onload = function(e) { // this is the async function
var elt = document.getElementById("tbldiv"); // table in this div
var tblstr = "<table>"; // need to build whole table in string
var recs = reader.result.split("\n"); // break file into records
for (var irec=0; irec<recs.length; irec+=1) {
var fields = recs[irec].split(","); // break record into fields
tblstr += "<tr><td>" + fields[0] + "</td><td>" + fields[1] + "</td></tr>";
}
elt.innerHTML = tblstr + "</table>";
}
reader.readAsText(file); // readAsText
}
</script>
</head>
<body>
<input type="file" id="fileid" onchange="doit1();" />
<div id="tbldiv">
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51106911
复制相关文章
相似问题