This is my HTML page.. If you copy paste this complete HTML in a browser you would see that the second section has Elements and Duration while the third section has Elements and targeted resources, In this case i want to dynamically change the 2nd and 3rd row to expand like the first one.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</script>
</HEAD>
<BODY>
<table border="1">
<tr>
<th class="element_header">Elements1</th>
<th class="tr_res">TR1</th>
<th class="duration">Duration1</th>
</tr>
<tr>
<td class="element_td">Element Data 1</td>
<td class="tr_td">TR - TD - 1</td>
<td class="duration">Duration Data 1</td>
</tr>
<tr>
<th class="element_header">Elements2</th>
<th class="duration">Duration2</th>
</tr>
<tr>
<td class="element_td">Element Data 2</td>
<td class="duration">Duration Data 2</td>
</tr>
<tr>
<th class="element_header">Elements3</th>
<th class="tr_res">TR3</th>
</tr>
<tr>
<td class="element_td">Element Data 3</td>
<td class="tr_td">TR - TD - 3</td>
</tr>
</BODY>
</HTML>