CODEWITHSUNDEEP
javascriptjqueryhtmloptimizationhtml-table
Rylyn
Rylyn

Reputation: 333

How to modify rows of large table in the shortest time using jquery?

I have two html tables with the same amount of rows in each. I would like table A rows to have the same height as table B ones. I tried something like this :

$tableA.find('tr').each(function (i, elem) {
    $row = $tableB.find('tr.calendar_row:eq(' + i + ')');
    $(this).height($row.height());
});

It works quite well, but when my tables are big (+300 rows), this function takes up to 8 seconds.

Is there a way to improve performance ? For example, I tried to store tableA and tableB rows to vars, and iterate through those arrays, but then it seems I can't use jquery's height() function.

EDIT : Here's my two tables : I want my tableA rows to match with tableB

Tables image

Upvotes: 1

Views: 75

Answers (2)

Mustapha Larhrouch
Mustapha Larhrouch

Reputation: 3403

try to put the tableB's rows in a var :

var rows = $tableB.find('tr.calendar_row');
$tableA.find('tr').each(function (i, elem) {
    $row = rows.eq(i);
    $(this).height($row.height());
});

Upvotes: 2

Rylyn
Rylyn

Reputation: 333

Ok, thanks to Mohammad I managed to get what I want ! Here's the code : 

var height = $tableB.find('tr.calendar_row').map(function () { return $(this).height(); }).get();
$tableA.find('tr').each(function (i, elem) {
    $(this).height(height[i]);
});

With this method, execution time is about 0.5s

Thank everyone for your answers !

Upvotes: 1

Related Questions