如何使用JAVASCRIPT创建表格搜索栏来搜索用户上传的CSV文件？答案

【问题标题】：How To Create A Table Search Bar Using JAVASCRIPT To Search A CSV File uploaded by user?如何使用JAVASCRIPT创建表格搜索栏来搜索用户上传的CSV文件？
【发布时间】：2023-02-10 01:03:09
【问题描述】：

如何实现用户上传的 CSV 文件的搜索栏在网页中显示为表格。

基本上我正在尝试制作一个网页，该网页将 csv 文件显示为表格，并通过搜索栏从表格中搜索指定的单词。

html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=in, initial-scale=1.0">
    <title>Document</title>
    <script src="./app.js"></script>
</head>
<body>
    <input type="text" name="search" id="search" placeholder="Enter Student Name">
    <input type="file" accept=".csv" id="picker">
    <table id="table"
    ></table>
</body>
</html>


window.onload=() => {
    var reader = new FileReader(),
        picker = document.getElementById("picker"),
        table = document.getElementById("table");

    picker.onchange = () => reader.readAsText(picker.files[0]);
    reader.onloadend = () => {
        let csv = reader.result;
        table.innerHTML ="";
        let rows = csv.split("\r\n")
        for(let row of rows){
            let cols = row.match(/(?:\"([^\"]*(?:\"\"[^\"]*)*)\")|([^\",]+)/g);
            if (cols!=null){

                let tr = table.insertRow();
                for(let col of cols){
                    let td = tr.insertCell();
                    td.innerHTML = col;

                }
            }
        }
    }
}

我试图从 yt 视频制作一个搜索栏，但没有帮助。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用 JavaScript、HTML 和 CSS 为在网页中显示为表格的用户上传的 CSV 文件实现搜索栏。这是让您入门的一种方法：

将 CSV 文件解析为对象数组：您可以使用 PapaParse 之类的库将上传的 CSV 文件解析为 JavaScript 对象数组。它使搜索对象/数组而不是原始 csv 字符串更容易。
从解析的数据创建一个 HTML 表格：您可以创建一个 HTML 表格并用解析的 CSV 文件中的数据填充它。
添加搜索栏：您可以在网页上添加用于搜索的输入字段和搜索按钮。
搜索表格：您可以使用 JavaScript 在表格中搜索输入的单词并突出显示匹配的行。您可以使用 .filter() 方法过滤对象数组，并使用 .includes() 方法检查每个对象中是否存在搜索词。
更新表格：过滤数组后，您可以更新 HTML 表格以仅显示匹配的行。

【讨论】：