我开发了一个代码来读取用户评分数据(从多个txt文件(例如两个以上的txt文件)读取)并将它们显示在表格中。我无法正确显示表格和数据,到目前为止,我一次只能访问一个txt文件。有关修复表布局(添加了另一个表以显示其外观)以及表中数据排列的任何建议。下面是我的示例txt数据文件示例sample1.txt和sample2.txt,然后在其中包含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>
我还没有添加表头,并且输入文件的第一个字段之前不需要有空格,而在第一和第二个字段之间只需有一个空格,如下所示。
选择一个文件,然后选择下一个,然后在所有选定的文件都使用时创建。这将绘制表并擦除数据数组以进行新选择。
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=[];
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句