Go Premium for a chance to win a PS4. Enter to Win


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

Posted on 2009-04-14
Medium Priority
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")
                        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

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


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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
While opting for any web-to-print solution, you need to discuss with your team and some of your end users and know their opinions about your decisions. In this article we list down some questions you need to ask yourself.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses

877 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