jquery - Populate a HTML table with csv data

Question

Welcome To Ask or Share your Answers For Others

jquery - Populate a HTML table with csv data

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

jquery - Populate a HTML table with csv data

Searching on internet i tried to copy and modify a jquery script to populate a HTML table with a csv data but it does not work: the table stays empty. Below i paste the code. Please advise why this does not work. I installed IIS on my PC to test this code locally.

The HTML page consists of 3 tabs and i am trying to populate the table on the first tab.

<!doctype html>
<html lang="en">
  <head>
    <title>test csvToTable</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Zelf toegevoegd-->
    <style>
        .project-tab {
            padding: 10%;
            margin-top: -8%;
        }
        .project-tab #tabs{
            background: #007b5e;
            color: #eee;
        }
        .project-tab #tabs h6.section-title{
            color: #eee;
        }
        .project-tab #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: #0062cc;
            background-color: transparent;
            border-color: transparent transparent #f3f3f3;
            border-bottom: 3px solid !important;
            font-size: 16px;
            font-weight: bold;
        }
        .project-tab .nav-link {
            border: 1px solid transparent;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
            color: #0062cc;
            font-size: 16px;
            font-weight: 600;
        }
        .project-tab .nav-link:hover {
            border: none;
        }
        .project-tab thead{
            background: #f3f3f3;
            color: #333;
        }
        .project-tab a{
            text-decoration: none;
            color: #333;
            font-weight: 600;
        }
    </style>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <section id="tabs" class="project-tab">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav>
                        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Project Tab 1</a>
                            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Project Tab 2</a>
                            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Project Tab 3</a>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        </div>
                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                        </div>
                        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
    <script id="rendered-js">
        function arrayToTable(tableData) {
        var table = $('<table class="table" cellspacing="0"></table>');
        $(tableData).each(function (i, rowData) {
        var table = $('<table class="table" cellspacing="0"></table>')
            if (i=0) {
                var thead = $('<thead></thead>');
                var row = $('<tr class="rownum-' + [i] + '"></tr>');
                $(rowData).each(function (j, cellData) {
                row.append($('<td class="' + [i] + '">' + cellData + '</td>'))});
                thead.append(row);
                table.append(thead);
                }
                else {
                    var tbody = $('<tbody id="tEuro"></tbody>');
                    var row = $('<tr class="rownum-' + [i] + '"></tr>');
                    $(rowData).each(function (j, cellData) {
                    row.append($('<td class="' + [i] + '">' + cellData + '</td>'))});
                    tbody.append(row);
                };
                table.append(tbody);
            });
        return table;
        }
        $.ajax({
        type: "GET",
        url: "http://localhost/NV_EuroData.csv",
        success: function (data) {
            $("#nav-home").append(arrayToTable(Papa.parse(data).data));
        } });
        //# sourceURL=pen.js
    </script>
  </body>
</html>

question from:https://stackoverflow.com/questions/65652001/populate-a-html-table-with-csv-data

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T18:42:24+0000

On your page, there is an ajax:

        $.ajax({
        type: "GET",
        url: "http://localhost/NV_EuroData.csv",
        success: function (data) {
            $("#nav-home").append(arrayToTable(Papa.parse(data).data));
        } });

this ajax load the file NV_EuroData.csv from your localhost server. It seems that the mentioned file can not be reached.

so, check whether that file is reached or not, by putting in your browser address bar

http://localhost/NV_EuroData.csv

so if you put that file in the right place, you will display it, so your page would work well.

looking forward to your comments.

Based on your comment

Try to rewrite the file name in both HTML and in the folder in small case letters like nv_eurodata.csv. and check http://localhost/nv_eurodata.csv and check the working of the HTML page.

Categories

jquery - Populate a HTML table with csv data

jquery - Populate a HTML table with csv data

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags