БлогNot. Javascript: читаем текстовый файл с сервера в таблицу HTML

Javascript: читаем текстовый файл с сервера в таблицу HTML

В отличие от этой заметки, работаем с "простым" текстовым файлом, а не с JSON. Тем не менее, все "важные моменты", указанные в конце статьи по ссылке, верны и здесь.

Предположим, что табличные данные находятся в текстовом файле на хосте. В одной строке файла содержится одна строка таблицы, а данные будущих ячеек разделены символом табуляции. При этом необязательно, чтобы количество столбцов во всех строках было одинаковым, "недостающие" столбцы просто заполнятся пробелами справа. Данные ячеек могут содержать разметку HTML.

Вот пример файла 1.txt, который находится в одной папке на хосте с документом скрипта и обрабатывается им:

	26.11.2021	27.11.2021
Магнус Карлсен	½	1
Ян Непомнящий	&frac12;	0	<b>&frac12;</b>

В реальности такой файл данных может (и должен) создаваться и редактироваться неким серверным скриптом, подобным вот этому.

Листинг скрипта (без стандартных обрамляющих тегов HTML), всю работу выполняет функция getData:

<div id="tableDiv"></div>

<script type="text/javascript">
function getData (url, id) {
 let resElem = document.getElementById(id);
 let request = new XMLHttpRequest();
 request.open('get', url, true);
 request.send();
 request.onreadystatechange = function() {
  if (this.readyState != 4) return;
  if (this.status !== 200) {
   resElem.innerHTML = 'Ошибка: ' + (this.status ? this.statusText : 'неизвестная ошибка');
   return;
  }
  let tableData = this.responseText; //Полученный с сервера файл
  tableData = tableData.split ('\n'); //Разбиваем на строки
  let rows = tableData.length, cells = [], maxCols = 0;
  for (let i = 0; i < rows; i++) { //Разбиваем на ячейки и ищем макс. кол-во столбцов
   let row = tableData[i].split ('\t');
   let cols = row.length;
   cells[i] = [];
   for (let j = 0; j < cols; j++) cells[i].push (row[j]);
   if (cols > maxCols) maxCols = cols;
  }
  let table = document.createElement('table'); //Формируем таблицу
  table.style.border = '1px dotted #008';
  table.style.margin = '0 auto';
  table.style.padding = '0';
  let ps = Math.floor(100/maxCols);
  for (let i = 0; i < rows; i++) {
   let row = table.insertRow(table.rows.length);
   let cols = cells[i].length;
   for (j = 0; j < maxCols; j++) {
    let cell = row.insertCell (j);
    let txt = document.createElement('span');
    txt.innerHTML = j < cols ? cells[i][j] : '&nbsp;'; //"Лишние" ячейки пусты, если есть
    cell.setAttribute('title', '('+(i+1)+','+(j+1)+')'); 
     //Всплывающая при наведении подсказка для ячейки - номер её строки и столбца
    cell.style.width = ps+'%';
    cell.style.textAlign = 'center';
    cell.style.padding = '2px';
    cell.style.margin = '0';
    cell.appendChild (txt);
   }
  }
  let elem = document.getElementById (id);
  elem.appendChild (table); //Добавляем таблицу в нужный элемент
 }
}

getData ('./1.txt','tableDiv');
</script>
<noscript>
 <p style="text-align:center;">Извините, требуется включённый Javascript для работы приложения!</p>
</noscript>

 Что получается, можно посмотреть онлайн (этот скрипт в работе, новое окно/вкладка)

27.11.2021, 10:53 [788 просмотров]


теги: textprocessing javascript html сервер

К этой статье пока нет комментариев, Ваш будет первым