CODEWITHSUNDEEP
javascriptjquery
Ankur Mukherjee
Ankur Mukherjee

Reputation: 3867

changing the values of height attribute of table cells using jquery or javascript

I have two tables say table 1 and table 2.(both having equal number of rows) For each of the rows in table 1, I wish to set the height of the corresponding cells in table 2 equal to the corresponding cell in table 1. i.e table2-row1-col1 = table1-row1-col1 and similar.

Please help me .

Upvotes: 3

Views: 2791

Answers (3)

Blazemonger
Blazemonger

Reputation: 92903

Use .each to loop through the rows in the first table, and use .eq() to select the table-2 row which corresponds to each table-1 row:

$('#table1 tr').each(function(i,el) {
    var hgt = $(this).height();
    $('#table2 tr').eq(i).height(hgt);
});

http://jsfiddle.net/mblase75/sCdRk/

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337570

Assuming both tables have the exact same number of rows, the below should work. If they differ you'll need to check the existence of a matching table1 row before setting the height.

var $table1 = $("#table1");
var $table2 = $("#table2");

$("TR", $table2).each(function(index) {
    $(this).css("height", $("TR", $table1).eq(index).css("height"));
});

Fiddle here to prove it works.

Upvotes: 2

YODA
YODA

Reputation: 309

First, you must make sure the two tables have the same number of rows or add some index check codes to avoid OutOfIndex error.

Here is some codes, just FYI:

var tbl2Rows = $("#tbl2 > tbody > tr");
$("#tbl1 > tbody > tr").each(function(index){
    console.log($(this).height());
    $(tbl2Rows.get(index)).height($(this).height());
});

Upvotes: 0

Related Questions