个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我需要将数据从 csv 文件导入到表单中。我试过这个主题的例子:
How to import CSV file into HTML form, and export HTML form to CSV file
不幸的是，它对我不起作用。文件正在打开，但没有数据放入表格。
我的 index.html 文件如下所示:
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript" src="script.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
</head>
<body>
<input id="upload" type="file">
<form id="csvForm">
<input id="a"></input>
<input id="b"></input>
<input id="c"></input>
<input id="d"></input>
</form>
<button id="download">Download</button>
</body>
</html>
和 script.js 文件:
document.getElementById("upload").addEventListener("change", upload, false);
document.getElementById("download").addEventListener("click", download, false);
function upload(e) {
var data = null;
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
var csvData = event.target.result;
var parsedCSV = d3.csv.parseRows(csvData);
parsedCSV.forEach(function (d, i) {
if (i == 0) return true; // skip the header
document.getElementById(d[0]).value = d[1];
});
}
}
function download(e) {
data = [["id","value"]];
var f = d3.selectAll("#csvForm > input")[0];
f.forEach(function(d,i){
data.push([d.id, d.value]);
});
console.log(data);
var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function (d, i) {
dataString = d.join(",");
csvContent += i < data.length ? dataString + "\n" : dataString;
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "FormData.csv");
link.click();
}
我要补充点什么吗？还有其他库或框架吗？
感谢您的任何回复。
最佳答案
效果不错只需移动<script type="text/javascript" language="JavaScript" src="script.js"></script> <body> 末尾的标签标记
.
.
.
<script src="https://d3js.org/d3.v3.js"></script>
<script type="text/javascript" language="JavaScript" src="script.js"></script>
</body>
更新您的问题后我不明白您到底需要什么，您想在文本框中查看上传的 csv 吗？如果是的话..
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<input id="upload" type="file">
<form id="csvForm">
<input id="a"></input>
<input id="b"></input>
<input id="c"></input>
<input id="d"></input>
</form>
<button id="download">Download</button>
<script src="https://d3js.org/d3.v3.js"></script>
<script type="text/javascript">
document.getElementById("upload").addEventListener("change", upload, false);
document.getElementById("download").addEventListener("click", download, false);
var out = "";
function upload(e) {
document.getElementById('csvForm').innerHTML = "";
var data = null;
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (event) {
var csvData = event.target.result;
var parsedCSV = d3.csv.parseRows(csvData);
parsedCSV.forEach(function (d, i) {
if (i == 0) return true; // skip the header
if(d.constructor === Array){
// console.log(d);
// document.getElementById(d[0]).value = d[1];
createForm(d);
}
});
}
}
function createForm(csv){
// console.log(out);
for (var i in csv) {
out+='<input value="' +csv[i]+ '">';
}
document.getElementById('csvForm').innerHTML = out;
out+='<br>';
}
function download(e) {
data = [["id","value"]];
var f = d3.selectAll("#csvForm > input")[0];
f.forEach(function(d,i){
data.push([d.id, d.value]);
});
console.log(data);
var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function (d, i) {
dataString = d.join(",");
csvContent += i < data.length ? dataString + "\n" : dataString;
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "FormData.csv");
link.click();
}
</script>
</body>
</html>关于javascript - 将 CSV 数据导入 HTML 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52732363/
24
4
0
我有两个 csv 文件 file1.csv 和 file2.csv。 file1.csv 包含 4 列。 文件1: Header1,Header2,Header3,Header4 aaaaaaa,bb
我想知道是否有任何方法可以在导入数据库之前测试 CSV 文件？ 我有一个包含多列的巨大 CSV 文件，每列都有不同的数据类型和大小。如何测试生成的 CSV 文件中出现的数据是否与每列的大小一致？ 还有
我正在从 SCOM 中提取服务器列表，并希望根据包含以下数据的 CSV 检查此列表: Computername,Collection Name Server01,NA - All DA Servers
我有一个包含 24 列的 csv 文件。其中我只想阅读 3 列。我看到 super CSV 是一个非常强大的库，但我不知道如何部分读取 CSV。 partial reading上的链接坏了。 请帮我举
我正在尝试将加特林日志文件导出到 CSV，因为我需要更新 google 电子表格中的所有全局值，因为我的经理需要电子表格中的值。 最佳答案 此 CSV 文件被删除并替换为 JSON 文件，名为 glo
我对 csv 是结构化数据还是半结构化数据感到困惑。 就像 RDBMS 是一个有关系的结构化数据，但 csv 没有关系。 我无法找到确切的答案。 最佳答案 我可以说，具有恒定列和行(二维)的 CSV
我正在使用 pipes-csv 库读取一个 csv 文件。我想先读第一行，然后再读其余的。不幸的是，在 Pipes.Prelude.head 函数返回之后。管道正在以某种方式关闭。有没有办法先读取 c
起初这似乎很明显，但现在我不太确定。 如果 CSV 文件具有以下行: a, 我会将其解释为具有值“a”和“”的两个字段。但是然后查看一个空行，我可以很容易地争辩说它表示一个值为“”的字段。 我接受文件
我正在尝试将列表字典写入 CSV 文件。我希望这些键是 CSV 文件的标题，以及与该键关联的列中的每个键关联的值。 如果我的字典是: {'600': [321.4, 123.5, 564.1, 764
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 关闭 10 年前。 Improve thi
是否有任何官方方法允许 CSV 格式的文件允许评论，无论是在其自己的行上还是在行尾？ 我尝试检查wikipedia关于此以及RFC 4180但两者都没有提到任何让我相信它不是文件格式的一部分的内容，所
我有一些 csv 格式的数据。然而它们已经是一个字符串，因为我是从 HTTP 请求中获取它们的。我想使用数据框来查看数据。但是我不知道如何解析它，因为 CSV 包只接受文件，而不接受字符串。 一种解决
我有一个 CSV 文件，其中包含一些字段的值列表。它们作为 HTML“ul”元素存储在数据库中，但我想将它们转换为对电子表格更友好的东西。 我应该使用什么作为分隔符？我可以使用转义的逗号、竖线、分号或
我使用 Google 表格(电子表格)来合并我的 Gambio 商店的不同来源的文章数据。要导入数据，我需要在 .csv 文件中使用管道符号作为分隔符/分隔符，并使用 "作为文本分隔符。在用于导出为
这是一个奇怪的请求，因为我们都知道数据库头不应该包含空格。 但是，我正在使用的系统需要在其标题中使用空格才能导入。 我创建了一个 Report Builder 报告，它将数据构建到一个表中，并在我运行
我有一个 .csv 文件，我需要将其转换为 coldfusion 查询。我使用了 cflib.org CSVtoQuery 方法，它工作正常......但是...... 如果 csv 中的“单元格”在
我想知道是否有任何方法可以生成文化中性 CSV 文件，或者至少指定文件中存在的特定列的数据格式。 例如，我生成了包含带小数点分隔符 (.) 的数字的 CSV 文件，然后 将其传递给小数点分隔符为 (,
我正在构建一个 CSV 字符串 - 因此用户单击 div 的所有内容 - 5 个字符的字符串都会传递到隐藏字段中 - 我想做的是附加每个新值并创建一个 CSV 字符串 - 完成后- 在文本框中显示 -
我正在努力从另外两个文件创建一个 CSV 文件 这是我需要的 我想要的文件(很多其他行) “AB”；“A”；“B”；“C”；“D”；“E” 我拥有的文件: 文件 1:"A";"B";"C";"D";"
我正在尝试将表导出到配置单元中的本地 csv 文件。 INSERT OVERWRITE LOCAL DIRECTORY '/home/sofia/temp.csv' ROW FORMAT DELIMI
我是一名优秀的程序员,十分优秀！