Как при помощи jquery изменить html разметку таблицы на div блоки?

Question

Олег Галимов @olegalimov

JavaScript

Как при помощи jquery изменить html разметку таблицы на div блоки?

Доброе врtмя суток.
Подскажите как при помощи jquery изменить html разметку таблицы на div блоки?
Я пишу так

$(document).ready(function(){
   var innerhtml = $("table tr td").html();
    var innerhtml = innerhtml.replace(/table/g, "div");
    var innerhtml = innerhtml.replace(/tbody/g, "div");
    var innerhtml = innerhtml.replace(/tr/g, "div");
    var innerhtml = innerhtml.replace(/td/g, "div");
    $("table tr td").html(innerhtml);
});

У меня таблица приходит на страничку по java скрипту
То ли скрипт срабатывает до того как приходит таблица, тогда как сделать чтоб скрипт по изменению запускался только тогда, когда таблица сформируется страничке?

Вопрос задан более трёх лет назад
237 просмотров

1 комментарий

Подписаться 1 Средний 1 комментарий

Сергей delphinpro @delphinpro Куратор тега JavaScript
не проще поменять стили для этой таблицы?

.mytable .mytable thead, .mytable tbody, .mytable tfoot, .mytable tr, .mytable th, .mytable td { display: block }
Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

Комментировать

3 комментария

Олег Галимов @olegalimov Автор вопроса

Вот так сделал

$(window).bind("load", function() {
	setInterval(function() {

 var innerhtml = $("table, tr, td").html();
 var innerhtml = innerhtml.replace(/table/g, "div");
 var innerhtml = innerhtml.replace(/tbody/g, "div");
 var innerhtml = innerhtml.replace(/tr/g, "div");
 var innerhtml = innerhtml.replace(/td/g, "div");
 $("table, tr, td").html(innerhtml);

}, 2000);
});

По интервалу в 2 сек. все нормально переводит но, переводит постоянно в 2 сек.
Как сделать по таймеру 1 раз?

Написано более трёх лет назад

Дмитрий Ларин @fanrok

Олег Галимов,

$(window).bind("load", function() {
  setTimeout(function() {

 var innerhtml = $("table, tr, td").html();
 var innerhtml = innerhtml.replace(/table/g, "div");
 var innerhtml = innerhtml.replace(/tbody/g, "div");
 var innerhtml = innerhtml.replace(/tr/g, "div");
 var innerhtml = innerhtml.replace(/td/g, "div");
 $("table, tr, td").html(innerhtml);

}, 2000);
});

Написано более трёх лет назад

Олег Галимов @olegalimov Автор вопроса

Благодарю

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- 11 часов назад
- 88 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 12 часов назад
- 54 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 12 часов назад
- 33 просмотра
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 1 подписчик
- 17 часов назад
- 57 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 67 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Существуют ли браузерные реализации WebView для AJAX и Fetch?
- 1 подписчик
- 22 апр.
- 87 просмотров
1

ответ
JavaScript

Простой
Как обрабатывать пользовательский запрос больше не показывать конкретный попап?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- 22 апр.
- 593 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Запуск установки приложения PWA при загрузке страницы?
- 2 подписчика
- 21 апр.
- 217 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Разработать программу для работы с PCI-E

24 апр. 2024, в 11:18

10000 руб./за проект

В wordpress подключить модуль по рассрочке (документацию дам)

24 апр. 2024, в 10:58

4500 руб./за проект

Развернуть болванку мултиплеерной игры unity на сервере

24 апр. 2024, в 09:59

5000 руб./за проект

не проще поменять стили для этой таблицы?

.mytable .mytable thead, .mytable tbody, .mytable tfoot, .mytable tr, .mytable th, .mytable td { display: block }

Answer 1 · 2019-02-19 10:44:36

Табличка уже сформирована, так как скрипт запускается по $(document).ready().
И, сдаётся мне, таким способом не получится изменять DOM-модель. Делов том, что это не текст, а созданные объекты в иерархии DOM. Даже jQuery не сможет путём замены букв изменить структуру документа. Нужно брать в цикле от низу (td), и, поднимаясь до table, забирать содержимое узла, и заменять узел на div.

Answer 2 · 2019-02-19 10:47:58

Добавить в ваш "java скрипт" который получает табличку

function TableToDiv(){
    var innerhtml = $("table tr td").html();
    var innerhtml = innerhtml.replace(/table/g, "div");
    var innerhtml = innerhtml.replace(/tbody/g, "div");
    var innerhtml = innerhtml.replace(/tr/g, "div");
    var innerhtml = innerhtml.replace(/td/g, "div");
    $("table tr td").html(innerhtml);
}
$.ajax({
  //
  success: function(){
    TableToDiv()
  }
});

Как при помощи jquery изменить html разметку таблицы на div блоки?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт