Klonowanie tabeli

0

Cześć,
Mając "narysowaną" na stronie tabelę chciałbym dokonać jej pewnej modyfikacji. Chodzi mi o uzyskanie np. efektu zablokowania nagłówka lub kolumn. Jednym ze sposobów jest "pocięcie" tabeli na poszczególne elementy (thead, tbody) i wstawienie ich w osobne divy i odpowiednie ustawienie css-ów dla nich. Problem na jaki napotkałem dotyczy samej funkcji "klonowania". U mnie wygląda to tak (klonowanie nagłówka):

var $table = $("#Table");
var $table_head = $("<table>")
     .addClass($table.attr("class"));

var $thead = $("<thead>")
     .appendTo($table_head);

 $table.children("thead").each(function () {
        $(this).children("tr").each(function () {
            var $tr = $("<tr>")
                .attr("class", $(this).attr("class") === "undefined" ? 1 : $(this).attr("class"))
                .appendTo($thead);
            $(this).children("th").each(function () {
                var $th = $("<th>")
                    .html($(this).html())
                    .attr("class", $(this).attr("class") === "undefined" ? 1 : $(this).attr("class"))
                    .attr("colspan", $(this).attr("colspan") === "undefined" ? 1 : $(this).attr("colspan"))
                    .attr("rowspan", $(this).attr("rowspan") === "undefined" ? 1 : $(this).attr("rowspan"));
                $("<div>").width($(this).width()).appendTo($th);
                $th.appendTo($tr);
            });
        });
    });

Zauważyłem, że w tabeli-klonie występują drobne (nawet 1px) różnice w szerokości kolumn w porównaniu do oryginału. O ile na Firefox-ie nie jest to aż tak bardzo widoczne o tyle na Chrome lub Operze te różnice już są zauważalne szczególnie przy większej liczbie kolumn końcówka tabeli robi się sporo przesunięta. Nie bardzo wiem w czym leży problem...

0

Ha!
Znalazłem rozwiązanie!
Dla ciekawych... Przy pobieraniu szerokości elementu lepiej użyć:

$(element)[0].getBoundingClientRect().width;

1 użytkowników online, w tym zalogowanych: 0, gości: 1