Изменение таблицы в DOM?

Question

[Dina]

Есть таблиц, которая генерируется из файла .txt

<table class="table_top">
    <thead>...</thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>текст который нужно изменить на ссылку с этим текстом</td>
            ...
        </tr>
...

Это код для вывода данных из файла .txt

const INPUT = document.addEventListener('DOMContentLoaded', function(event) {
  fetch('/message.txt')
    .then(function(response) {
      if (response.ok) {
        return response.text();
      }
      throw new Error('Не удалось загрузить файл.');
    }).then(function(text) {
      renderTable(text);
    })
    .catch(function(error) {
      console.error('Произошла ошибка при попытке отобразить файл: ' + error.message);
    });
});

И код который изменяет текст в таблице на ссылку с этим же текстом, но код не работает, так как таблицы по факту на странице нет.

(function() {    
    // сбор переменных
    // вы можете изменить это, чтобы изменить, какой элемент вы заменяете
    var reference = document.querySelector('.table_top td:nth-child(2)');
    var text = reference.innerText;
    var replacement = text.replace(reference, "www.site.com/q?=" + reference);
    // создать новый тег привязки
    var a = document.createElement('a');
    a.href = replacement;
    a.innerText = text;
    // произведите замену
    reference.innerHTML = ''; // очистите старое содержимое ссылки
    reference.appendChild(a); // добавьте новый тег привязки к элементу
});

Помогите настроить

Comments

[VoidVolker]

Dina сделайте песочницу через соответствующий тег, будьте любезны. А так же опишите вашу проблему более конкретно.

[Dina]

VoidVolker,
Что дополнить, понятнее никак, про тег не понял

[VoidVolker]

Dina, кнопка с плюсом в форме "Вставить код с внешнего сервиса" - JSfiddle/CodePen. Сейчас у вас три не связанных куска кода, которые невозможно даже запустить. А про отладку вообще молчу. И что именно у вас не получается в отладке вашего кода?

Answer 1

[alexalexes]

renderTable(text);
Если это промис, то его нужно продолжить then-ом и выполнить вашу функцию.
Если нет - обычная функция, то выполнить следом за ней.
А так, нужно смотреть, есть ли в рендере асинхронные методы, чтобы понять, когда отслеживать готовность таблицы для замены ссылок.
Дополнено:
Нужно передать управление браузеру на один миг с помощью setTimeout, чтобы пересчитать DOM. Тогда ваша функция обнаружит вставленный контент.

renderTable(text);
setTimeout(ваша_функция, 0);

Comments

[Dina]

Вслед я уже пытался, не работает. Вот полный код

const INPUT = document.addEventListener('DOMContentLoaded', function(event) {
  fetch('/message.txt')
    .then(function(response) {
      if (response.ok) {
        return response.text();
      }
      throw new Error('Не удалось загрузить файл.');
    }).then(function(text) {
      renderTable(text); 
    })
    .catch(function(error) {
      console.error('Произошла ошибка при попытке отобразить файл: ' + error.message);
    });
});
// Элемент для выбора файлов.
// const INPUT = document.querySelector('input[name="readable"]');
// Элемент для вывода сгенерированной таблицы.
const PREVIEW = document.querySelector('#preview');
// Регулярное выражение для проверки расширения файла.
// const REGEX = new RegExp('(.*?)\.(csv)$', 'i');



// Функция отрисовки таблицы.
function renderTable(data) {
  // Предварительно создадим элементы,
  // отвечающие за каркас таблицы.
  let table = document.createElement('table');
  let thead = document.createElement('thead');
  let tbody = document.createElement('tbody');

  // Добавим класс к таблице.
  table.classList.add('table_top');

  // Разбиваем входящие данные построчно.
  // Разделитель - перенос строки.
  // Перебираем полученный массив строк.
  data.split(/\r\n|\r|\n/)
    .forEach(function(row, index) {
      // Создадим элемент строки для таблицы.
      let trow = document.createElement('tr');

      // Разбиваем каждую строку на ячейку.
      // Разделитель - точка с запятой.
      // Перебираем полученный массив будущих ячеек.
      row.split(/;/).forEach(function(cell) {
        // Создадим элемент ячейки для таблицы.
        let tcell = document.createElement(index > 0 ? 'td' : 'th');
        // Заполним содержимое ячейки.
        tcell.textContent = cell;
        // Добавляем ячейку к родительской строке.
        trow.appendChild(tcell);
      });

      // Добавляем строку к родительскому элементу.
      // Если индекс строки больше нуля,
      // то родительский элемент - `tbody`,
      // в противном случае- `thead`.
      index > 0 ? tbody.appendChild(trow) : thead.appendChild(trow);
    });

  // Добавляем заголовок таблицы к родительскому элементу.
  table.appendChild(thead);
  // Добавляем тело таблицы к родительскому элементу.
  table.appendChild(tbody);

  // Очищаем элемент для вывода таблицы.
  PREVIEW.innerHTML = '';
  // Добавляем саму таблицу к родительскому элементу.
  PREVIEW.appendChild(table); 
}

[alexalexes]

Обновил ответ.

[Dina]

alexalexes, Почему-то только к одному применяется, к первому .table_top td:nth-child(2) Всё правильно же
И ссылка без www.site.com/q?= , а просто href="текст"

[alexalexes]

Вместо:

var reference = document.querySelector('.table_top td:nth-child(2)')

Нужно:

let reference_list = document.querySelectorAll('.table_top td:nth-child(2)')

с дальнейшим заимствованием методов типа массива для коллекции узлов:

[].forEach.call(reference_list, function(reference)
{
 // все, что выполнялось для одного элемента
});

Потому что без него для коллекции нельзя вызвать метод forEach напрямую.

[alexalexes]

Не понятно, почему вы с узлом reference работаете как со строкой?

var replacement = text.replace(reference, "www.site.com/q?=" + reference);

А почему бы не проще сформировать ссылку.
a.href = "www.site.com/q?=" + text;

[Dina]

alexalexes, Не понимаю как

[Сергей delphinpro]

alexalexes,

Потому что без него для коллекции нельзя вызвать метод forEach напрямую.

forEach в NodeList давно есть

[Сергей delphinpro]

const INPUT = document.addEventListener('DOMContentLoaded', function(event) {
  fetch('/message.txt')
    .then(function(response) {
      if (response.ok) {
        return response.text();
      }
      throw new Error('Не удалось загрузить файл.');
    }).then(function(text) {
      renderTable(text);
      document.querySelectorAll('.table_top td:nth-child(2)').forEach(td=>{
        let txt = td.textContent;
        td.innerHTML = `<a href="www.site.com/?q=${txt}">${txt}</a>`;
      });
    })
    .catch(function(error) {
      console.error('Произошла ошибка при попытке отобразить файл: ' + error.message);
    });
});