resize multiple <td width> in a <tr> porgrammatically

After trying many different "solutions" I am turning to EE for help.  Here's what I'm trying to do:
enable a user to custom define the sections (<td>) of a row in a <tr>..  That is, the user should be able to define a variable # of sections (<td>'s) in one row (<tr>) via a utility I'm creating.  The default 3-section widths are "33%" with a constant height of "100"
If the user wants to change the default settings, say, the 1st section is to be 10% in width, the 2nd section to be 55% and the 3rd section to be 35%, the utility should then dynamically 'adjust' the <td>'s accordingly.  The utility should then refresh ONLY the row on an onlick...refresh row </a> <a href> and not do a complete page refresh (a location.reload();)

I am able to modify the HTML text in each default section (via .innerHTML in javascript) but am not able to chnage the widths of each section dynamically (i.e., the TD widths do not change).

Any suggestions are appreciated.    

The row (<tr>) definition is...
<Table   width="600" class="toprowsample" cellspacing="0" cellpadding="0" bgcolor="#bbd3ff"  BORDER="1">
<tr><td class="section1"  id="section1">section1</td><td   class="section2" id="section2">section2</td><td  id="section3">section3</td></tr>
</table>
 
section styles are in the page as  <style type="text/css">   
 #section1 {
	 height: 100px;
	 WIDTH: 33%;
     overflow: hidden; 
 }
 </style>
 
Javacript function called on the onclick refresh row a href.
                        var sect1 = document.getElementById("section1")
                        sect1.style.visibility = "hidden";
                        var sect2 = document.getElementById("section2")
                        sect2.style.visibility = "hidden";
                        var sect3 = document.getElementById("section3")
                        sect3.style.visibility = "hidden";
                        sect1.Width = "50";
                        sect2.Width = "450";
                        sect3.Width = "100";
                        sect1.innerHTML = "SECTION1";
                        sect2.innerHTML = "SECTION2";
                        sect3.innerHTML = "SECTION3";  
                        sect1.style.visibility = "visible";
                        sect2.style.visibility = "visible";
                        sect3.style.visibility = "visible";

Open in new window

dklaukAsked:
Who is Participating?
 
dklaukConnect With a Mentor Author Commented:
It appears I have solved the problem. by testing/working with the .innerHTLM line.  Basically, I was modifying the <td...</td> elements but did not include the<table><tr> elements at the start of the .innerHTML.

I will be closing this issue.

Thanks for your suggestion as it got me taking a rather close look into the DOM tree.  I learned something along the way!!  
0
 
MadhubalanCommented:
Hi....
You can try this dynamically
 Dim row As New HtmlTableRow
        Dim cell As New HtmlTableCell
        row.Attributes.Add("runat", "server")
        row.ID = "Row1"
        cell.Width = "200px"
        cell.ID = "Cell1"
row.Cells.Add(cell1)
I guess this may help u
0
 
dklaukAuthor Commented:
Thanks for the response.  It appears your code is asp.net.  My utility is classic asp, vbscript and javascript.  I'm really looking for a javascript solution as the flow of the utility already is set up to call a javascript function.

Any update on your suggestion based on this environment?

Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.