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

Question

[Олег Галимов]

Доброе вр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 скрипту
То ли скрипт срабатывает до того как приходит таблица, тогда как сделать чтоб скрипт по изменению запускался только тогда, когда таблица сформируется страничке?

Comments

[Сергей delphinpro]

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

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

Answer 1

[Moses Fender]

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

Answer 2

[Дмитрий Ларин]

Добавить в ваш "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()
  }
});

Comments

[Олег Галимов]

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

$(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 раз?

[Дмитрий Ларин]

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

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

[Олег Галимов]

Благодарю