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

时间：2018-06-29 17:37:35

标签： javascript html

我正在自学用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 个答案:

答案 0 :(得分：0)

在我看来，这需要一种像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服务器上没有PHP，则安装它应该不会很困难。这是来自PHP.net的链接，描述了如何在几种不同的操作系统上安装PHP：

http://php.net/manual/en/install.php

答案 1 :(得分：0)

这不是解决方案，而是建议您可以对所有输入重复使用相同的数据列表。我的两分钱。下面的链接表明，您实际上并不需要太多相同数据列表的实例。

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”在其中一项注释中的建议进行操作。

您可以使用循环来随时生成所有数据列表选项。如果您可以共享CSV的结构，则可以。我可以为您提供一个伪代码，说明如何使用动态生成的所有选项为数据列表生成html。

答案 2 :(得分：0)

我猜

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>
相关问题
最新问题