如何加載 CSV 文件以在 HTML5 頁面上顯示並使用搜索框對其進行過濾？

Question

我需要一個 HTML5 文檔，它在頁面加載時讀取 CSV 文件，該文件將在本地/我的網站/我們的服務器上托管。 CSV 文件將有 3 個列表：部門、類別、產品類型。 頁面需要有 3 個搜索框（每個搜索框一個）來搜索/過濾部門/類別/產品類型的某些關鍵字。

我對網絡開發和 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 文件中的相應列表並顯示它（當前搜索框做什么都不做）。

Answer 1

試着改變這個： $("#upload").bind("click",function ()到$(document).ready(function()

如果這對您有幫助，請將此標記為答案。

如何加載 CSV 文件以在 HTML5 頁面上顯示並使用搜索框對其進行過濾？

問題描述

1 個解決方案

解決方案1
1 2015-01-06 10:19:01

如何加載 CSV 文件以在 HTML5 頁面上顯示並使用搜索框對其進行過濾？

問題描述

1 個解決方案

解決方案1 1 2015-01-06 10:19:01

解決方案1
1 2015-01-06 10:19:01