Javascript 表使用来自多个 txt 文件的数据并显示在 html 文件上
[英]Javascript table using data from multiple txt files and displaying on html file
问题描述
I developed a code to read data of user ratings (from multiple txt files say more than two txt files) and display them in table.
我开发了一个代码来读取用户评分数据（从多个 txt 文件中说两个以上的 txt 文件）并将它们显示在表格中。 I have trouble properly displaying table and data and so far I managed to access only one txt file at a time.我无法正确显示表格和数据，到目前为止，我一次只能访问一个 txt 文件。 Any suggestions on fixing the table layout (added another table to show how it should look like) and data arrangement in the table.有关修复表格布局（添加另一个表格以显示其外观）和表格中的数据排列的任何建议。 Below is my sample txt data files called sample1.txt and sample2.txt and then complete html code with javascript within in.下面是我的示例 txt 数据文件，名为 sample1.txt 和 sample2.txt，然后在 javascript 内完成 html 代码。
sample1.txt样本1.txt
user1 100
user2 80
user3 60
user4 75
user5 100
user6 80
user7 60
user8 75
user9 12
user10 13
sample2.txt样本2.txt
user1 10
user2 20
user3 30
user4 45
user5 50
user6 60
user7 70
user8 80
user9 90
user10 99
tableExample4.html表Example4.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>
1 个解决方案
解决方案1
1 已采纳 2021-02-06 17:32:02
I havent added the table header and the input files need to have no spaces before the first field and only one space between first and second field as below.我没有添加表格 header 并且输入文件需要在第一个字段之前没有空格，并且在第一个和第二个字段之间只有一个空格，如下所示。
Select One File then the next then when all selected use create. Select 一个文件然后下一个然后当所有选择使用创建。 This draws the table and wipes the data array for a new selection.这将绘制表格并擦除数据数组以进行新选择。
Sample1.txt样本1.txt
user1 100
user2 80
user3 60
user4 75
user5 100
user6 80
user7 60
user8 75
user9 12
user10 13
Sample2.txt样本2.txt
user1 10
user2 20
user3 30
user4 45
user5 50
user6 60
user7 70
user8 80
user9 90
user10 99
New Script as follows新脚本如下
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=[];
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.