javascript - Bootstrap table style not applying to JS generated table

Hello I am new to website development (started a couple of days ago).

I have some programming experience using Python and C#.

I have been trying to generate an HTML table using JS and apply it a Bootstrap css style.

I can't seem to get it to work.

What I get:

What I want:

I hope to get something that styles like this (simplified from: w3schools)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href=".3.7/css/bootstrap.min.css">
      <script src=".2.1/jquery.min.js"></script>
      <script src=".3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">
      <h2>Basic Table</h2>
      <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
      <table class="table">
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[email protected]</td>
          </tr>
      </table>
    </div>

    </body>
    </html>

My html page looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>CSVParser</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href=".3.7/css/bootstrap.min.css">
        <script src=".2.0/jquery.min.js"></script>
        <script src=".3.7/js/bootstrap.min.js"></script>
        </head>

    <body>
        <div class="container">
        <script type="text/javascript" src="../scripts/csvToHtml.js"></script>
        <form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
            <input type="file" id="myFile" name="myFile"><br>
            <input type="submit" name="submitMe" value="Process File">
        </form>

        <table id="myTable" class="table"></table>
        </div>
        </body>
</html>

and the JS script is:

function processFile() {
 var fileSize = 0;
 var theFile = document.getElementById("myFile").files[0];
 if (theFile) {
     var table = document.getElementById("myTable");
     var headerLine = "";
     var myReader = new FileReader();
     myReader.onload = function(e) {
         var content = myReader.result;
         var lines = content.split("\r");
         for (var count = 0; count < lines.length; count++) {
             var row = document.createElement("tr");
             var rowContent = lines[count].split(",");
             for (var i = 0; i < rowContent.length; i++) {
                 if (count == 0) {
                     var cellElement = document.createElement("th");
                 } else {
                     var cellElement = document.createElement("td");
                 }
                 var cellContent = document.createTextNode(rowContent[i]);
                 cellElement.appendChild(cellContent);
                 row.appendChild(cellElement);
             }
             myTable.appendChild(row);
        }
    }
    myReader.readAsText(theFile);
 }
 return false;
}

The csv data file I load looks like this:

TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144

This is the generated HTML table from the JS:

<table id="myTable" class="table">
    <tr>
        <th>TestA</th>
        <th>TestB</th>
        <th>TestC</th>
        <th>TestD</th>
    </tr>
    <tr>
        <td>Alpha</td>
        <td>0.551608445</td>
        <td>0.807554763</td>
        <td>54.8608682</td>
    </tr>
    <tr>
        <td>Beta</td>
        <td>0.191220409</td>
        <td>0.279946678</td>
        <td>57.55254144</td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Hello I am new to website development (started a couple of days ago).

I have some programming experience using Python and C#.

I have been trying to generate an HTML table using JS and apply it a Bootstrap css style.

I can't seem to get it to work.

What I get:

What I want:

I hope to get something that styles like this (simplified from: w3schools)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">
      <h2>Basic Table</h2>
      <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
      <table class="table">
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[email protected]</td>
          </tr>
      </table>
    </div>

    </body>
    </html>

My html page looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>CSVParser</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>

    <body>
        <div class="container">
        <script type="text/javascript" src="../scripts/csvToHtml.js"></script>
        <form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
            <input type="file" id="myFile" name="myFile"><br>
            <input type="submit" name="submitMe" value="Process File">
        </form>

        <table id="myTable" class="table"></table>
        </div>
        </body>
</html>

and the JS script is:

function processFile() {
 var fileSize = 0;
 var theFile = document.getElementById("myFile").files[0];
 if (theFile) {
     var table = document.getElementById("myTable");
     var headerLine = "";
     var myReader = new FileReader();
     myReader.onload = function(e) {
         var content = myReader.result;
         var lines = content.split("\r");
         for (var count = 0; count < lines.length; count++) {
             var row = document.createElement("tr");
             var rowContent = lines[count].split(",");
             for (var i = 0; i < rowContent.length; i++) {
                 if (count == 0) {
                     var cellElement = document.createElement("th");
                 } else {
                     var cellElement = document.createElement("td");
                 }
                 var cellContent = document.createTextNode(rowContent[i]);
                 cellElement.appendChild(cellContent);
                 row.appendChild(cellElement);
             }
             myTable.appendChild(row);
        }
    }
    myReader.readAsText(theFile);
 }
 return false;
}

The csv data file I load looks like this:

TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144

This is the generated HTML table from the JS:

<table id="myTable" class="table">
    <tr>
        <th>TestA</th>
        <th>TestB</th>
        <th>TestC</th>
        <th>TestD</th>
    </tr>
    <tr>
        <td>Alpha</td>
        <td>0.551608445</td>
        <td>0.807554763</td>
        <td>54.8608682</td>
    </tr>
    <tr>
        <td>Beta</td>
        <td>0.191220409</td>
        <td>0.279946678</td>
        <td>57.55254144</td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Share edited Jan 19, 2018 at 13:27 asked Jan 19, 2018 at 13:11 Sorade 9371 gold badge15 silver badges32 bronze badges

Can we see the generated HTML for the table? – VTodorov Commented Jan 19, 2018 at 13:16
Hi VTodorov, I have tried to use console.log() but without success. I don't know how I could get it to show. – Sorade Commented Jan 19, 2018 at 13:20
1 You could use the browsers "elements" tab (for chrome). Rightclick on the page and click "View page source". – VTodorov Commented Jan 19, 2018 at 13:21
That worked, I added the generated table at the end of the question – Sorade Commented Jan 19, 2018 at 13:27

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

You are missing a <tbody> element around all the <tr> Elements. thats it. if you insert this additionally you are fine with your layout.

I've changed your code quite a bit but here is a working example:

<!DOCTYPE html>
<html>
    <head>
        <title>CSVParser</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>

    <body>
        <div class="container">
            <form action="#" name="myForm" id="aForm" method="POST">
                <input type="file" id="myFile" name="myFile"><br>
                <input type="button" name="submitMe" value="Process File" onclick="processFile();">
            </form>
            <table id="myTable" class="table"></table>
        </div>
        
        </body>
        <script type="text/javascript">
            function processFile() {
                 var fileSize = 0;
                 var theFile = document.getElementById("myFile").files[0];
                 if (theFile) {
                     var table = document.getElementById("myTable");
                     var headerLine = "";
                     var myReader = new FileReader();
                     myReader.onload = function(e) {
                         var content = myReader.result;
                         var lines = content.split("\r");
                         var tbody = document.createElement("tbody");

                         for (var count = 0; count < lines.length; count++) {
                             var row = document.createElement("tr");
                             var rowContent = lines[count].split(",");
                             for (var i = 0; i < rowContent.length; i++) {
                                 if (count == 0) {
                                     var cellElement = document.createElement("th");
                                 } else {
                                     var cellElement = document.createElement("td");
                                 }
                                 var cellContent = document.createTextNode(rowContent[i]);
                                 cellElement.appendChild(cellContent);
                                 row.appendChild(cellElement);
                             }
                             tbody.appendChild(row);
                        }

                        table.appendChild(tbody);
                    }
                    myReader.readAsText(theFile);
                 }

                 return false;
            }
        </script>
</html>

Working example without having to upload a file

<!DOCTYPE html>
<html>
    <head>
        <title>CSVParser</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>

    <body>
        <div class="container">
            <form action="#" name="myForm" id="aForm" method="POST">
                <textarea id="myFile" name="myFile">TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144</textarea><br>
                <input type="button" name="submitMe" value="Process File" onclick="processFile();">
            </form>
            <table id="myTable" class="table"></table>
        </div>
        
        </body>
        <script type="text/javascript">
            function processFile() {
                var table = document.querySelector("#myTable");
                var content = $("#myFile").val();
                var lines = content.split("\n");
                var tbody = document.createElement("tbody");

                for (var count = 0; count < lines.length; count++) {
                    var row = document.createElement("tr");
                    var rowContent = lines[count].split(",");

                    for (var i = 0; i < rowContent.length; i++) {
                        if (count == 0) {
                            var cellElement = document.createElement("th");
                        } else {
                            var cellElement = document.createElement("td");
                        }

                        var cellContent = document.createTextNode(rowContent[i]);
                        cellElement.appendChild(cellContent);
                        row.appendChild(cellElement);
                    }

                    tbody.appendChild(row);
                }

                table.appendChild(tbody);

                return false;
            }
        </script>
</html>

ALSO! You are using myTable.appendChild(row); in your code although you've never initialized any myTable variable.

Load your js script just before the </body> end tag.
Now you are loading the JavaScript before the browser has read all your tags and by then it can't find the elements you are querying in your script.

<body>
  <div class="container">
  
  <form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
    <input type="file" id="myFile" name="myFile"><br>
    <input type="submit" name="submitMe" value="Process File">
  </form>

  <table id="myTable" class="table"></table>
  </div>
  <!-- Here's the difference -->
  <script type="text/javascript" src="../scripts/csvToHtml.js"></script> 
</body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap table style not applying to JS generated table - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)