CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chris
Chris

Reputation: 527

jquery one table inherit height from another

I have two tables, with same amount of tr's. They are both loading dynamically and I can't merge them. Here's how they look like for example: LINK

The content of first table is loading from database and sometimes users can enter 3 or 4 lines of text into td (that's why I can't declare table/tr/td height). Content of second table is always the same (there will be always one line of text)

Is it possible (with javascript/jquery), that table 2 somehow inherit table rows height from table 1 (if user enter longer text) and perfectly align like here: LINK ?

I'm trying to do it like this but I have completely no idea how to check height of an element without declaring it in css first:

var tableH = $("#table1 tr").height();
$("#table2 tr").css("min-height", tableH);

Upvotes: 0

Views: 1059

Answers (4)

jwatts1980
jwatts1980

Reputation: 7356

This gets pretty close

var itemNum = 0;

$("#table1 tr").each(function() {
  $("#table2 tr:nth-child(" + (itemNum+1) + ")").height( $(this).height() );
  itemNum++;
});

EDIT

Added +1 to itemNum. nth-child is 1-based. Seems to work on your fiddle

EDIT 2

As per thirdender's suggestion, this can be simplified to 

$("#table1 tr").each(function(itemNum) {
  $("#table2 tr:nth-child(" + (itemNum+1) + ")").height( $(this).height() );
});

Upvotes: 1

thirdender
thirdender

Reputation: 3951

Semantically, it makes sense to merge the tables. Here's some quick code that will do just that:

jQuery(function($) {
  var table2Rows = $("#table2 tr");
  $("#table1 tr").each(function(i) {
    table2Rows.eq(i).contents().appendTo(this);
  });
});

Demo

If you're generating the tables using jQuery or server side code, it makes sense to do the merge then (if possible) instead of later (using this code).

Also, I noticed some of the cells in the second table are empty… I updated the code to make the cells from the first table stretch (increased colspan) to fill that empty space: see updated jsFiddle.

Also, I think semantically it would make even more sense to make each day's activities a separate TBODY: see even more updated jsFiddle :-p

Upvotes: 1

zmanc
zmanc

Reputation: 5429

I am curious why you are doing this with TR and trying to get the row height.

Depending on what technology you are using to get the data there will be some good ways to combine the data. Is it coming across as JSON?

Maybe you can build it as fluid rows and use the spans to keep them aligned as you add records.

Also it will keep it from losing alignment as you add data.

http://jsfiddle.net/4pdCq/7/

I imported the bootstrap.css to make this work. 

<div class="row-fluid rowBorder">
  <div class="span4">Subject</div>
  <div class="span2">Hour</div>
  <div class="span4">Users</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span10">Monday</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">English English English english english english</div>
  <div class="span2">3pm</div>
  <div class="span4">User1</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">Espanol</div>
  <div class="span2">4pm</div>
  <div class="span4">User2</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span10">Tuesday</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">Italian</div>
  <div class="span2">1pm</div>
  <div class="span4">User3</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">French</div>
  <div class="span2">2pm</div>
  <div class="span4">User4</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span10">Wednesday</div>
</div>
<div class="row-fluid rowBorder">
  <div class="span4">Japanese</div>
  <div class="span2">10pm</div>
  <div class="span4">User5</div>
</div>

Upvotes: 0

Scrimothy
Scrimothy

Reputation: 2536

How about something like this:

$('#table2 td').each(function () {
  $(this).height($($('#table1 td')[$(this).index()]).height());
});

(untested)

Upvotes: 0

Related Questions