如何加载CSV文件以显示在HTML5页面上，并具有搜索框来过滤它

How to load CSV file to display on HTML5 page and have search boxes to filter it?

本文关键字：搜索 过滤 HTML5 加载 何加载 CSV 显示 文件      更新时间：2023-09-26

我需要一个HTML5文档，当页面加载时读取CSV文件，该文件将托管在本地/我的网站/我们的服务器上。CSV 文件将有 3 个列表：部门、类别、产品类型。页面需要有 3 个搜索框（每个搜索框一个），以搜索/过滤部门/类别/产品类型的特定关键字。

我是Web开发和HTML5/jQuery的新手，我有以下工作，您必须手动选择文件，然后单击上传以显示内容。我正在考虑更换

reader.readAsText($("#fileUpload")[0].files[0]);

自

reader.readAsText(string filename);

原因是 - 我已经知道文件名，所以可以指定它，但我知道你不能将字符串传递给

reader.readAsText

无论如何，我的代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSV Downloader</title>
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $("#upload").bind("click", function () {
            var regex = /^([a-zA-Z0-9's_''.'-:])+(.csv)$/;
            var localCSVfile = "C:'Users'User1'Desktop'Temp'Test for HTML5.csv";
            var test1 = false;
            if (regex.test(localCSVfile.toLowerCase())) {
                test1 = true;
                if (typeof (FileReader) != "undefined") {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var table = $("<table />");
                        var rows = e.target.result.split("'n");
                    for (var i = 0; i < rows.length; i++) {
                        var row = $("<tr />");
                        var cells = rows[i].split(",");
                        for (var j = 0; j < cells.length; j++) {
                            var cell = $("<td />");
                            cell.html(cells[j]);
                            row.append(cell);
                        }
                        table.append(row);
                    }
                    $("#dvCSV").html('');
                    $("#dvCSV").append(table);
                }
                reader.readAsText($("#fileUpload")[0].files[0]);
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid CSV file.");
        }
    });
});
</script>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<hr />
Department:<br>
<input type="text" name="department">
<br>
Categories:<br>
<input type="text" name="categories">
<br>
Product Types:<br>
<input type="text" name="producttypes">
<br>
<div id="dvCSV">
</div>
</body>
</html>

我不想要点击/上传按钮/功能，因为我希望在页面加载时自动加载 CSV 文件，此外，3 个搜索框实际上应该过滤 CSV 文件中的相应列表并显示它（当前搜索框不做任何事情）。

试着改变这个：$("#upload").bind("click",function ()成$(document).ready(function()

相关文章：