score:1 

<!doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        #myinput {
            background-image: url('/css/searchicon.png');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            width: 100%;
            font-size: 16px;
            padding: 12px 20px 12px 40px;
            border: 1px solid #ddd;
            margin-bottom: 12px;
        }

        #mytable {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid #ddd;
            font-size: 18px;
        }

        #mytable th,
        #mytable td {
            text-align: left;
            padding: 12px;
        }

        #mytable tr {
            border-bottom: 1px solid #ddd;
        }

        #mytable tr.header,
        #mytable tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>

<body>

    <h2>my customers</h2>

    <input type="text" id="myinput" onkeyup="myfunction()" placeholder="search for names.." title="type in a name">

    <input type="file" id="fileupload" />
    <input type="button" id="upload" value="upload" onclick="upload()" />
    <hr />
    <div id="dvcsv">
    </div>
    <table id="mytable">
        <tr class="header">
            <th style="width:60%;">name</th>
            <th style="width:40%;">country</th>
        </tr>
        <tr>
            <td>alfreds futterkiste</td>
            <td>germany</td>
        </tr>
        <tr>
            <td>berglunds snabbkop</td>
            <td>sweden</td>
        </tr>
        <tr>
            <td>island trading</td>
            <td>uk</td>
        </tr>
        <tr>
            <td>koniglich essen</td>
            <td>germany</td>
        </tr>
        <tr>
            <td>laughing bacchus winecellars</td>
            <td>canada</td>
        </tr>
        <tr>
            <td>magazzini alimentari riuniti</td>
            <td>italy</td>
        </tr>
        <tr>
            <td>north/south</td>
            <td>uk</td>
        </tr>
        <tr>
            <td>paris specialites</td>
            <td>france</td>
        </tr>
    </table>

    <script>
        function myfunction() {
            var input, filter, table, tr, td, i, txtvalue;
            input = document.getelementbyid("myinput");
            filter = input.value.touppercase();
            table = document.getelementbyid("mytable");
            tr = table.getelementsbytagname("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getelementsbytagname("td")[0];
                if (td) {
                    txtvalue = td.textcontent || td.innertext;
                    if (txtvalue.touppercase().indexof(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    </script>
    <script type="text/javascript">
        function upload() {
            var fileupload = document.getelementbyid("fileupload");
            var regex = /^([a-za-z0-9\s_\\.\-:])+(.csv|.txt)$/;
            if (regex.test(fileupload.value.tolowercase())) {
                if (typeof (filereader) != "undefined") {
                    var reader = new filereader();
                    reader.onload = function (e) {
                        var table = document.createelement("table");
                        var rows = e.target.result.split("\n");
                        for (var i = 0; i < rows.length; i++) {
                            var cells = rows[i].split(",");
                            if (cells.length > 1) {
                                var row = table.insertrow(-1);
                                for (var j = 0; j < cells.length; j++) {
                                    var cell = row.insertcell(-1);
                                    cell.innerhtml = cells[j];
                                }
                            }
                        }
                        var dvcsv = document.getelementbyid("dvcsv");
                        dvcsv.innerhtml = "";
                        dvcsv.appendchild(table);
                    }
                    reader.readastext(fileupload.files[0]);
                } else {
                    alert("this browser does not support html5.");
                }
            } else {
                alert("please upload a valid csv file.");
            }
        }
    </script>

</body>

</html>

i tried your issue, and found solution on this page: https://www.aspsnippets.com/articles/import-csv-file-to-html-table-using-javascript.aspx

its working, i tried importing a sample csv file. this is how your page looks on using the code given on the shared page, i have uploaded a sample 10 row csv data, and kept your html code as it is.screenshot

score:1

you could use the datatable.js plugin. it supports importing/exporting csv-files and gives you a searchable and sortable table.


Related Query

More Query from same tag