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

Posted on 2009-04-14
Last Modified: 2012-06-27
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>
section styles are in the page as  <style type="text/css">   
 #section1 {
	 height: 100px;
	 WIDTH: 33%;
     overflow: hidden; 
Javacript function called on the onclick refresh row a href.
                        var sect1 = document.getElementById("section1")
               = "hidden";
                        var sect2 = document.getElementById("section2")
               = "hidden";
                        var sect3 = document.getElementById("section3")
               = "hidden";
                        sect1.Width = "50";
                        sect2.Width = "450";
                        sect3.Width = "100";
                        sect1.innerHTML = "SECTION1";
                        sect2.innerHTML = "SECTION2";
                        sect3.innerHTML = "SECTION3";  
               = "visible";
               = "visible";
               = "visible";

Open in new window

Question by:dklauk
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2

Expert Comment

ID: 24144461
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"
I guess this may help u

Author Comment

ID: 24146994
Thanks for the response.  It appears your code is  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?


Accepted Solution

dklauk earned 0 total points
ID: 24149437
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!!  

Featured Post

Stressed Out?

Watch some penguins on the livecam!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A Change in PHP Behavior with Session Write Short Circuit ( (Winter 2014)** With the release of PHP 5.6 the session handler changed in a way that many think should be considered a bug.  See the note …
Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question