Как загрузить данные в таблицу html из текстового файла

Я пытаюсь отобразить записи upload.txt в таблице html.Как загрузить данные в таблицу html из текстового файла

Файл upload.txt расположен по этому URL-адресу: http://localhost:3000/upload. Когда мы назовем этот url, он получит файл upload.txt.

На самом деле я использую node.js here.So Я маршрутизации вот так:

app.get('/upload', function(req, res) { 
    res.sendfile('views/upload.txt'); 
});

Мой 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

Мой 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>

На этом этапе мы можем загрузить значения client_ip в таблицу.

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); 
    }); 
};

На самом деле я не могу загрузить данные в HTML table.Can кто-то пожалуйста, помогите мне по этому вопросу.

источник

2015-10-08 dev333

ЛОКАЛЬНЫЕ ХОЗЯЙСТВЕННЫЕ СВЯЗИ НЕ РАБОТАЮТ ОН-ЛАЙН ... Не публикуйте их здесь! –

ваш url говорит 'http: // localhost: 3000/upload' в' $ .get'. Не следует ли указывать полный 'url' с расширением типа' $ .get ('http: // localhost: 3000/upload.txt' ... '? –

Фактически я использую node.js в своем коде. Я пытаюсь сказать, если предположить, что текстовый файл находится на сервере на одном URL-адресе, то как загрузить данные текстового файла в таблицу html. – dev333

Вы не пытаетесь читать строку за строкой попробуйте вместо этого:

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); 
    }); 
};

Для повышения эффективности вы можете попытаться загрузить файл в куски Somthing как:

//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"); 
    }});

источник

2015-10-08 04:38:14

С помощью этого кода я могу отображать таблицу, но строки заполняются номерами, начиная с Zero. Я хочу отображать client_ip в таблице вместо цифр. – dev333

Ya, теперь его рабочий тон. Большое спасибо за ур info.But это занимает время, чтобы загрузить client_ip. Фактически у меня есть почти 68000 записей в файле upload.txt – dev333

В приведенном выше коде, где мы можем использовать setTimeout() ; – dev333

Первой проблемой, по-видимому, является запрос ajax, который не может найти ресурс. Исходный URL-адрес ajax не содержит расширения файла. то есть «http://localhost:3000/upload»

Данные получены. Когда вы добавите расширение файла, появится появившееся предупреждение. Но он проблема, кажется, с $ .each петли

Вы можете обновить populateTable функцию с ниже одной

function populateTable() { 

    var tableContent = ''; 

    $.get('http://localhost:3000/upload.txt', function(data) { 
     alert(data); 
     $('#tablediv').html(data.replace('n','')); 
    }); 
};

источник

2015-10-08 04:30:56 Arvin

DEMO

Предполагаете, вы возвращаете его как string. Тогда вам нужно split в string на основе на space характера, а затем петли его, а также необходимо избегать первую строку, которая будет client_ip

var ips=data.split(' '); 
var tableContent; 
$.each(ips, function(key,value){ 
    if(key==0) //do not display client_ip which is first string 
     return; 
    tableContent += '<tr>'; 
    tableContent += '<td>' + value + '</td>'; 
    tableContent += '</tr>'; 

}); 
$('table').html(tableContent);

источник

2015-10-08 04:43:28

Некоторые обновления на мой проницаемым ответ

Это будет обрабатывать ваши требования к best

function populateTable() { 

    var tableContent = ''; 


    $.get('http://localhost:3000/upload.txt', function(data) { 

     alert(data); 
     var lineByline = data.split('\n') 
     $.each(lineByline , function(index,value){ 
      tableContent += '<tr>'; 
      tableContent += '<td>' + value + '</td>'; 
      tableContent += '</tr>'; 
     }); 


     $('#tablediv').html(tableContent); 
    }); 
};

источник

2015-10-08 04:54:50 Arvin

Как загрузить данные в таблицу html из текстового файла

ответ

Смежные вопросы