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
  • 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

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 article will show, step by step, how to integrate R code into a R Sweave document
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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…

813 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now