- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在尝试根据用户选择选择特定的 csv 文件,然后通过单击按钮将其显示为网页中的 html 表格。
这需要的步骤是:从下拉列表中选择用于识别 csv 文件名的选项将 csv 文件名传递给将其显示为 html 表的函数单击按钮而不是在网页加载时执行此操作
下面是我目前的代码,代码的第一部分标识了 csv 文件名。第二部分读取硬编码的 csv 文件并将其解析为 html 表格,在网页打开时显示。
<script>
function button_clicked(){
var obj_opt = document.getElementById("opt");
var opt = obj_opt.value;
if (opt==""){
alert("Please select Option1");
return;
}
var obj_opt_two = document.getElementById("opt_two");
var opt_two = obj_opt_two.value;
if (opt_two==""){
alert("Please select Option2");
return;
}
var urls= "http://mysite/" + opt + "_" + opt_two + ".csv";
alert("The link is: " + urls);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
function arrayToTable(tableData) {
var table = $('<table></table>');
$(tableData).each(function (i, rowData) {
var row = $('<tr></tr>');
$(rowData).each(function (j, cellData) {
row.append($('<td>'+cellData+'</td>'));
});
table.append(row);
});
return table;
}
$.ajax({
type: "GET",
url: "http://mysite/Option1_Option2.csv",
success: function (data) {
$('body').append(arrayToTable(Papa.parse(data).data));
}
});
</script>
<button type="button" onClick="button_clicked()">Load New File</button>
我不确定如何组合这两个 javascript 以通过按钮将用户选择的 csv 加载为表格,非常感谢任何有关如何执行此操作的帮助!
最佳答案
要完成这项工作,您需要将 $.ajax
逻辑移动到按钮点击处理程序中,并将 url
值应用于它。
另请注意,在 HTML 中使用 on*
事件属性已经非常过时,应尽可能避免使用。您应该改用不显眼的事件处理程序。因为您已经在页面中包含了 jQuery,所以您可以使用它:
$(function() {
$('#load').click(function() {
var opt = $("#opt").val();
if (!opt) {
alert("Please select Option1");
return;
}
var opt_two = $("#opt_two").val();
if (!opt_two) {
alert("Please select Option2");
return;
}
$.ajax({
type: "GET",
url: `http://mysite/${opt}_${opt_two}.csv`,
success: function(data) {
$('body').append(arrayToTable(Papa.parse(data).data));
}
});
});
function arrayToTable(tableData) {
var html = tableData.map(function(row) {
var rowHtml = '<tr>';
row.forEach(function(cell) {
rowHtml += `<td>${cell}</td>`;
});
return rowHtml + '</tr>';
});
return `<table>${html.join('')}</table>`;
}
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<button type="button" id="load">Load New File</button>
最后,请注意 jQuery 1.7 现在已经相当老了。如果您仍然需要支持旧的 IE 浏览器,我建议升级到 1.12,如果不需要,我建议升级到 3.2.1。
关于javascript - 将特定的 csv 文件读入 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48559814/
我有两个 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
我是一名优秀的程序员,十分优秀!