Javascript table 使用来自多个 txt 文件的数据并显示在 html 文件上

Question

我开发了一个代码来读取用户评分数据（从多个 txt 文件，比如两个以上的 txt 文件）并将它们显示在 table 中。我无法正确显示 table 和数据，到目前为止我一次只能访问一个 txt 文件。关于修复 table 布局（添加另一个 table 以显示其外观）和 table 中的数据排列的任何建议。下面是我的示例 txt 数据文件，名为 sample1.txt 和 sample2.txt，然后在 in.

中使用 javascript 完成 html 代码

sample1.txt

 user1  100
 user2  80
 user3  60
 user4  75
 user5  100
 user6  80
 user7  60
 user8  75
 user9  12
 user10 13

sample2.txt

 user1  10
 user2  20
 user3  30
 user4  45
 user5  50
 user6  60
 user7  70
 user8  80
 user9  90
 user10 99

tableExample4.html

  <!DOCTYPE html>
  <html>
  <head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Read Text File</title> 
  </head> 

  <body> 
  <input type="file" name="inputfile"
        id="inputfile"> 
  <br> 

  <pre id="output"></pre> 
  <script>

  var file = document.getElementById('inputfile');

  file.addEventListener('change', () => {
  var txtArr = [];
  var fr = new FileReader();
  fr.onload = function() {
    // By lines
    var lines = this.result.split('\n');
    for (var line = 0; line < lines.length; line++) {
        txtArr = [...txtArr, ...(lines[line].split(" "))];
    }
   }

   fr.onloadend = function() {
    //console.log(txtArr);
   // document.getElementById('output').textContent=txtArr.join("");
   // document.getElementById("output").innerHTML = txtArr; 
   // console.log(txtArr[1]);
   
   // *********************  table 1 code test ****************************************

    var table= document.createElement('table'),
        thead = document.createElement('thead'),
        tbody = document.createElement('tbody'),
        th,
        tr,
        td;
        th = document.createElement('th'),          
        th.innerHTML="Name";
        table.appendChild(th);
        th = document.createElement('th'); 
        th.innerHTML= "Sample1";
        table.appendChild(th);
        th = document.createElement('th'); 
        th.innerHTML= "Sample2"
        table.appendChild(th);
        table.appendChild(thead);            
        table.appendChild(tbody);
        
        document.body.appendChild(table);
     for(var i=0;i<txtArr.length;i++){
        tr = document.createElement('tr'),
        //for Name
        td= document.createElement('td');
        td.innerHTML=txtArr[i];
        tr.appendChild(td);

        //for Samples
        td = document.createElement('td');
        td.innerHTML=txtArr[i];
        tr.appendChild(td);
          tbody.appendChild(tr);
     }
   // ******************  end of test code *************************************


    }

    fr.readAsText(file.files[0]);


    })
    // *********************  table 2 code test ****************************************
   function generate_table() {
   // get the reference for the body
   var body = document.getElementsByTagName("body")[0];

   // creates a <table> element and a <tbody> element
   var tbl = document.createElement("table");
   var tblBody = document.createElement("tbody");

   // creating all cells
   for (var i = 0; i < 2; i++) {
   // creates a table row
   var row = document.createElement("tr");

   for (var j = 0; j < 2; j++) {
   // Create a <td> element and a text node, make the text
   // node the contents of the <td>, and put the <td> at
   // the end of the table row
   var cell = document.createElement("td");
   var cellText = document.createTextNode("cell in row "+i+", column ");
   cell.appendChild(cellText);
   row.appendChild(cell);
   }

   // add the row to the end of the table body
  tblBody.appendChild(row);
  } 

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tbl);
  // sets the border attribute of tbl to 2;
  tbl.setAttribute("border", "2");

  }


  // ******************  end of test code ******************************************

  </script>

  <input type="button" value="Generate a table." onclick="generate_table()">

  </body>
  </html>

Answer 1

我没有添加 table header 并且输入文件需要在第一个字段之前没有 space 并且在第一和第二个字段之间只有一个 space如下。

Select 一个文件然后下一个然后当所有选择使用创建。这将绘制 table 并擦除数据数组以进行新选择。

Sample1.txt

user1 100
user2 80
user3 60
user4 75
user5 100
user6 80
user7 60
user8 75
user9 12
user10 13

Sample2.txt

user1 10
user2 20
user3 30
user4 45
user5 50
user6 60
user7 70
user8 80
user9 90
user10 99

新脚本如下

var file = document.getElementById('inputfile');

var txtArr = [];

file.addEventListener('change', () => {

  var fr = new FileReader();
  fr.onload = function() {
    // By lines
    var lines = this.result.split('\n');
    for (var line = 0; line < lines.length; line++) {
        txtArr.push(lines[line].split(" "));
    }
   }
fr.readAsText(file.files[0]);
});
    
function generate_table() {
   if ( typeof(document.getElementsByTagName("table")[0]) !="undefined" ) {
    document.getElementsByTagName("table")[0].remove();
   }
   // get the reference for the body
   var body = document.getElementsByTagName("body")[0];
    
   // creates a <table> element and a <tbody> element
   var tbl = document.createElement("table");
   var tblBody = document.createElement("tbody");
   
    // creating all cells
    for (var i = 0; i < txtArr.length; i++) {
       // creates a table row
       var row = document.createElement("tr");
           for (var j = 0; j < 2; j++) {
                var cell = document.createElement("td");
                var cellText = document.createTextNode(txtArr[i][j]);
                cell.appendChild(cellText);
                row.appendChild(cell);
                tblBody.appendChild(row);
     } 
      
     // put the <tbody> in the <table>
     tbl.appendChild(tblBody);
     // appends <table> into <body>
     body.appendChild(tbl);
     // sets the border attribute of tbl to 2;
     tbl.setAttribute("border", "2");
     
    }
    txtArr=[];
}

Javascript table 使用来自多个 txt 文件的数据并显示在 html 文件上

Javascript table using data from multiple txt files and displaying on html file

javascript

arrays

datatable

file-io

text