Bootstrap 表格样式不适用于 JS 生成的表格答案

【问题标题】：Bootstrap table style not applying to JS generated tableBootstrap 表格样式不适用于 JS 生成的表格
【发布时间】：2018-06-28 17:49:34
【问题描述】：

您好，我是网站开发的新手（几天前开始）。

我有一些使用 Python 和 C# 的编程经验。

我一直在尝试使用 JS 生成一个 HTML 表格并将其应用为 Bootstrap css 样式。

我似乎无法让它工作。

我得到了什么：

我想要什么：

我希望能得到这样风格的东西（简化自：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.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/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>john@example.com</td>
          </tr>
      </table>
    </div>

    </body>
    </html>

我的 html 页面如下所示：

<!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.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/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>

而JS脚本是：

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;
}

我加载的 csv 数据文件如下所示：

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

这是从 JS 生成的 HTML 表格：

<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>

【问题讨论】：

我们可以看到为表格生成的 HTML 吗？
您好 VTodorov，我曾尝试使用 console.log() 但没有成功。我不知道怎么才能让它显示出来。
您可以使用浏览器的“元素”选项卡（适用于 chrome）。右键单击页面，然后单击“查看页面源代码”。
成功了，我在问题末尾添加了生成的表格

标签： javascript html css bootstrap-4

【解决方案1】：

您在所有 <tr> 元素周围缺少一个 <tbody> 元素。而已。如果您另外插入它，您的布局就可以了。

我已经对您的代码进行了相当多的更改，但这是一个有效的示例：

<!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.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/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>

无需上传文件的工作示例

<!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.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/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！您在代码中使用了myTable.appendChild(row);，尽管您从未初始化任何myTable 变量。

【讨论】：

您能与我们分享您对“工作示例”的定义吗？您对 <tbody> 元素的看法是正确的，但您的示例对我不起作用。
我猜你没有上传@Sorade给出的csv文件
content="TestA,TestB,TestC,TestD\rAlpha,0.551608445,0.807554763,54.8608682\rBeta,0.191220409,0.279946678,57.55254144"。我们不是在这里测试文件上传，是吗？我的意思是：我不应该在我的电脑上创建文件来回答或测试Stack Overflow 上的答案。这就是 sn-ps 的全部意义所在。无需在本地做任何事情。
@AndreiGheorghiu 我已经更新了关于您的批评的答案。
感谢您的回答并为未上传 csv 数据表示歉意。我复制粘贴了数据，但知道使用 textarea 会导致与 csv 文件相同的结果对我来说并不明显。

【解决方案2】：

在 </body> 结束标记之前加载您的 js 脚本。
现在您在浏览器读取所有标签之前加载 JavaScript，到那时它无法找到您在脚本中查询的元素。

<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>

【讨论】：

结束标签是指最后一个 html、body 还是 div ？您可以复制粘贴并修改回复中的代码吗？那太好了！
对不起，我的意思是正文结束标签。我认为我的标签在 wiki 语法中丢失了。