如何将数据从文本文件加载到html表中 [英] How to load the data into html table from a text file
本文介绍了如何将数据从文本文件加载到html表中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
upload.txt文件位于以下网址： http：// localhost：3000 / upload 。当我们调用这个url时，它会得到upload.txt文件。
实际上我在这里使用node.js。所以我在这里路由如下：
app.get（'/ upload'，function（req，res）{
res.sendfile（'views / upload。 txt'）;
}）;
我的upload.txt：
<$ p $ client_ip
1.0.230.145
1.1.145.219
1.1.214.239
1.11.112.100
1.112.218.165
1.112。 98.44
1.113.55.77
1.114.193.160
1.115.77.221
1.115.81.190
1.124.150.22
1.124.158.81
我的table.html：
<！DOCTYPE html>
< html>
< head>
< style>
body {
background-color：＃FFBD0C;
}
表{
border-collapse：separate;
border-spacing：1px;
背景：#CCC;
margin-right：200px
}
表格{
background：#EEE;
font-weight：600;
padding：10px 20px;
text-align：center;
}
table tbody {
padding：0;余量：0;
border-collapse：collapse;
border-spacing：0px;
}
table td {
background：＃C7DBED;
padding：5px 10px;
text-align：center;
}
< / style>
< script src ='http：//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'>< / script>
< script>
var userListData = [];
$（document）.ready（function（）{
populateTable（）;
}）;
函数populateTable（）{
var tableContent ='';
$ b $ .get（'http：// localhost：3000 / upload'，function（data）{
alert（data）; // Here I能够获取整个文本文件数据
$ .each（data，function（）{
alert（data）; //这里我无法获取数据
tableContent + ='< tr>';
tableContent + ='< td>'+ this.client_ip +'< / td>';
tableContent + ='< / tr>' ;
}）;
$（'＃tablediv'）。html（tableContent）;
}）;
};
< / script>
< / head>
< body>
< h2 style =color：brown; margin-left：490px; margin-top：150px;>上传客户端< / h2>
< table width =60％id =tabstyle =margin-left：200px;>
< thead>
< tr>
< th>客户< / th>
< / tr>
< thead>
< tbody id =tablediv>
< / tbody>
< / table>
< / body>
< / html>
此时，我们如何将client_ip值加载到表中。
函数populateTable（）{
var tableContent ='';
$ b $ .get（'http：// localhost：3000 / upload'，function（data）{
alert（data）;
$ .each（data，function（）{
tableContent + ='< tr>';
tableContent + ='< td>'+ this.client_ip +'< / td>';
tableContent + ='< / tr>';
}）;
$（'＃tablediv'）。html（tableContent）;
}）;
};
实际上我无法将数据加载到html表格中。任何人都可以帮助我解决这个问题。
解决方案你不是试图逐行读取文件，而是尝试使用它：
函数populateTable（）{
var tableContent ='';
$ b $ .get（'http：// localhost：3000 / upload'，function（data）{
alert（data）;
//这会将字符串分成一行一行
var lineByline = data.split（'\\\
'）;
//这里我们正在创建和打印数组值
$ .each（lineByline，function（key，value）{
tableContent + ='< tr>';
tableContent + ='< td>'+ value +' < / td>';
tableContent + ='< / tr>';
}）;
$（'＃tablediv'）。html（tableContent）;
}）;
};
为了提高效率，您可以尝试将文件加载到块中：
//告诉你的ajax只读取一定数量的数据
//你必须在递归中使用它来获取整个数据
//在调用$ .get（..）
$ .ajaxSetup（{beforeSend：function（xhr）{
xhr.setRequestHeader（Range，bytes = 0-2800 ）;
}}）;
I'm trying to display the upload.txt records into a html table.
The upload.txt file is located at this url : http://localhost:3000/upload. When we call this url it will get upload.txt file.
Actually I'm using node.js here.So I'm routing here like this :
app.get('/upload', function(req, res) {
res.sendfile('views/upload.txt');
});
My upload.txt :
client_ip
1.0.230.145
1.1.145.219
1.1.214.239
1.11.112.100
1.112.218.165
1.112.98.44
1.113.55.77
1.114.193.160
1.115.77.221
1.115.81.190
1.124.150.22
1.124.158.81
My table.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#FFBD0C;
}
table {
border-collapse:separate;
border-spacing:1px;
background:#CCC;
margin-right:200px
}
table th {
background:#EEE;
font-weight:600;
padding:10px 20px;
text-align:center;
}
table tbody {
padding:0; margin:0;
border-collapse:collapse;
border-spacing:0px;
}
table td {
background:#C7DBED;
padding:5px 10px;
text-align:center;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script>
var userListData = [];
$(document).ready(function() {
populateTable();
});
function populateTable() {
var tableContent = '';
$.get( 'http://localhost:3000/upload', function( data ) {
alert(data); // Here I'm able to get the entire text file data.
$.each(data, function(){
alert(data); // here I'm unable to get the data.
tableContent += '<tr>';
tableContent += '<td>' + this.client_ip + '</td>';
tableContent += '</tr>';
});
$('#tablediv').html(tableContent);
});
};
</script>
</head>
<body>
<h2 style="color:brown; margin-left:490px;margin-top:150px;">Upload Clients</h2>
<table width="60%" id="tab" style="margin-left:200px;">
<thead>
<tr>
<th>Clients</th>
</tr>
<thead>
<tbody id="tablediv">
</tbody>
</table>
</body>
</html>
At this point,how can we load the client_ip values into the table.
function populateTable() {
var tableContent = '';
$.get( 'http://localhost:3000/upload', function( data ) {
alert(data);
$.each(data, function(){
tableContent += '<tr>';
tableContent += '<td>' + this.client_ip + '</td>';
tableContent += '</tr>';
});
$('#tablediv').html(tableContent);
});
};
Actually I'm unable to load the data into a html table.Can anyone please help me out regarding this issue.
解决方案
You're not trying to read file line by line try this instead:
function populateTable() {
var tableContent = '';
$.get( 'http://localhost:3000/upload', function( data ) {
alert(data);
//this will split the string into array line by line
var lineByline = data.split('\n');
//here we're itraing the array which you've created and printing the values
$.each(lineByline , function(key,value){
tableContent += '<tr>';
tableContent += '<td>' + value + '</td>';
tableContent += '</tr>';
});
$('#tablediv').html(tableContent);
});
};
For efficiency you can try loading the file in chunks somthing like:
//telling your ajax to read only some amount of data
// you have to use this in recursion to get the entire data
// just add this before you call $.get(..)
$.ajaxSetup({ beforeSend : function(xhr) {
xhr.setRequestHeader("Range", "bytes=0-2800" );
}});
这篇关于如何将数据从文本文件加载到html表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
