Question

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

我有使用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>

Answer 1

您错过了所有<tbody>元素周围的<tr>元素。而已。如果你另外插入它，你的布局就可以了。

我已经改变了你的代码，但这是一个有效的例子：

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

也是！您在代码中使用myTable.appendChild(row);，但您从未初始化任何myTable变量。

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

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

2 个答案: