需要将CSV导入html/javascript并在数据列表中使用_Javascript_Html

需要将CSV导入html/javascript并在数据列表中使用

javascript html

需要将CSV导入html/javascript并在数据列表中使用,javascript,html,Javascript,Html,我正在教自己用html/css/javascript编写代码，以帮助提高自己的工作效率（我在一所大学招收研究生，目前这一切都是在纸上完成的。我想把它放到一个网页上，这样对所有参与的人来说都更容易）抱歉，这有点混乱：。添加{ 溢出：自动；显示：内联块；填充：10px；宽度：钙（65%-10px）；边框：1px实心；背景色：rgba（255、255、255、75） } .添加输入{ 宽度：100%；垂直对齐：顶部； } .添加按钮{ 利润率：10px；左边距：44px； } 。加

我正在教自己用html/css/javascript编写代码，以帮助提高自己的工作效率（我在一所大学招收研究生，目前这一切都是在纸上完成的。我想把它放到一个网页上，这样对所有参与的人来说都更容易）

抱歉，这有点混乱：

。添加{
溢出：自动；
显示：内联块；
填充：10px；
宽度：钙（65%-10px）；
边框：1px实心；
背景色：rgba（255、255、255、75）
}
.添加输入{
宽度：100%；
垂直对齐：顶部；
}
.添加按钮{
利润率：10px；
左边距：44px；
}
。加入运输署{
边框：1px实心；
}


新增课程：
阶级#
课程名称
目录号
单位/学分
*日子
*时间
*屋宇/室
可变学分？
##
##
##
##
##
##

对我来说，这种需求听起来更适合像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>


新增课程：
阶级#
课程名称
目录号
单位/学分
*日子
*时间
*屋宇/室
可变学分？
##
这不是一个解决方案，而是一个建议，您可以对所有输入重用相同的数据列表。我的两分钱。下面的链接显示，您实际上不需要相同数据列表的这么多实例


##
##

其次，CSV听起来不错。只要你能读。现在，一旦您在javascript变量中阅读了它，请按照上面的教程进行操作，正如其中一条注释中的“bowl0stu”所建议的那样
您可以使用循环在运行中生成所有数据列表选项。如果你能分享你的CSV的结构。我可以为您提供一个伪代码，说明如何使用动态生成的所有选项为datalist生成html。
我想FileReader在HTML5中是新的。下面是一个从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>


td{宽度：100px；边框：1px纯黑色；}
“严格使用”；
函数doit1（）{
/*这假定选定的文件如下所示：
阿尔法，12345
贝塔，98765
*/
var file=document.getElementById（'fileid'）.files[0]；//所选文件
//您不能硬编码该文件——用户必须选择它。
var reader=new FileReader（）；//在HTML5中是新的
reader.onload=function（e）{//这是异步函数
var elt=document.getElementById（“tbldiv”）；//此div中的表
var tblstr=“”；//需要以字符串形式构建整个表
var recs=reader.result.split（“\n”）；//将文件拆分为记录
对于（var irec=0；ireccsv是一个很好的选择，但是，它们在javascript中可能会很混乱。请查看此答案，以获得更深入的演示。我确实查看了该线程，但我不确定我将如何获取该线程，然后引用html数据列表中的数据。对如何完成该任务有何想法？不客气！我承认我我没有直接回答你的问题，但我认为给你一个不同的（可能更简单的）答案不会有什么坏处选项。正如在您的原始帖子上发表评论的用户所指出的，这可以用Javascript完成，但这样做通常很混乱，而且不完全直观。PHP当然不是唯一的选项，只是碰巧是我非常熟悉的选项。假设您不反对使用Javascript库，那么有几个jQuery插件这可能会有帮助：如果你有能力，我也会这样做，@DoodlebugOh谢谢你！我想知道我如何才能清理它。我的CSV看起来像这样：选择你的课程，课程1，课程2，课程3。。。
<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>