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...