Solved

How can I set style info to a <TABLE>'s <TD> when generated dynamically?

Posted on 2004-07-30
6
275 Views
Last Modified: 2012-06-27
Dear Experts,

I have designed a HTML table with the following code.

I need to add rows to the table at runtime.
I did the code using jscript.
Its working.

The code snippet is as follows: (The complete code is gn later in the content:)

      rRow = document.all.tblIngredientsTD.insertRow();
      tdRawName = document.all.tblIngredientsTD.rows[document.all.tblIngredientsTD.rows.length-1].insertCell();
      
      sRaw = "<input type='text' class='clsIngredientsRawmaterial'";
      sRaw = sRaw + "  id=' txtRawName'>";
      tdRawName.innerHTML =  sRaw;

But the plm is when adding the rows, the style and border informations for a <TD> is not set.
I tried displaying the outerHTML of tdRawName .Its just shows "<TD></TD>"

I tried setting the attribute like tdRawName.setAttribute("bgcolor","red")

When displaying , it shows "<TD bgcolor='red'></TD>".
But visually, its not set.

My requirement is , I set the border color of the <TD>'s of the first row as 'white'.
But when adding the rows dynamically,this border color of rows are not set.Instead, the bordercolor of table alone is shown.

I need the exact apperance of the first row to all dynamically added rows.(including all style information).

Could you please tell me how can I set that?

Thanks

Latha

Here goes the code:

<table name='tblIngredientsTD' id='tblIngredientsTD' width='510px' cellpadding='0' cellspacing='0' bordercolor='#2F6143' border='1' bgcolor='#dfe1ce'style='FONT-FAMILY:<%= sFont%>;color=#000000;font-size=11;font-style:bold;BORDER-BOTTOM-width: 1px;BORDER-LEFT-width: 1px;BORDER-RIGHT-width: 1px;BORDER-TOP-width: 1px' >
      <tr>
            <td WIDTH='188px' bordercolor='white' class='clsLstTableContentTD'><input type='text' class='clsIngredientsRawmaterial' id='text'                   name='text'>
            </td>
            <td WIDTH='125px' bordercolor='white' class='clsLstTableContentTD'><input type='text' class='clsIngredientsQuantity'  id='text'                   name='text'>
            </td>
            <td bordercolor='white' class='clsLstTableContentTD'>
                  <select class='clsIngredientsUOM' id=select2 name=select2><option>Liters</option></select>
            </td>
            <td WIDTH="20px" bordercolor='white' class='clsLstTableContentTD' align='center'>
                  <img style='cursor:hand' src='images/but_add.gif' onclick="addRow();">
            </td>
            <td WIDTH="20px" bordercolor='white' class='clsLstTableContentTD' align='center'>
                  <img style='cursor:hand' src='images/but_remove.gif'>
            </td>
            <td WIDTH="20px" bordercolor='white' class='clsLstTableContentTD' align='center'>
                  <img style='cursor:hand' src='images/but_lookup.gif'>
            </td>
      </tr>
</table>


-------------------------------------------------------------------------------------------------------------------------

code for css classes:

.clsLstTableContentTD
{
      BORDER-BOTTOM-WIDTH: 1px;
      BORDER-LEFT-WIDTH: 1px;
                BORDER-RIGHT-WIDTH: 0px;
                BORDER-TOP-WIDTH: 0px;
      LETTER-SPACING:1px;
}



.clsIngredientsRawmaterial
{
      WIDTH:140px;
      BORDER-STYLE:none;
      BORDER-WIDTH:0px;
      HEIGHT:20px;
      BACKGROUND-COLOR:#DFE1CE;
      ALIGN:MIDDLE;
      VALIGN:TOP;
}

.clsIngredientsQuantity
{
      WIDTH:80px;
      BORDER-STYLE:none;
      BORDER-WIDTH:0px;
      HEIGHT:20px;
      BACKGROUND-COLOR:#DFE1CE;
      ALIGN:MIDDLE;
      VALIGN:TOP;
}

.clsIngredientsUOM{
      WIDTH:111px;
      BORDER-WIDTH:0px;
      BORDER-STYLE:none;
      HEIGHT: 20px;
      BACKGROUND-COLOR:#DFE1CE;
      ALIGN:right;
      VALIGN:top;
}

---------------------------------------------------------------------

Code for inserting the row dynamically:


<script language="jscript">
      function addRow(){
            var tdRawName,tdQty,tdUnit,tdAdd,tdRemove,tdLookup;
            var tRawName,tRawQty,cboRawUnit,tAdd,tRemove,tLookup ;
            
            //adding the row
            rRow = document.all.tblIngredientsTD.insertRow();
            
            //adding rawmaterial name TD
            tdRawName = document.all.tblIngredientsTD.rows[document.all.tblIngredientsTD.rows.length-1].insertCell();
      
            sRaw = "<input type='text' class='clsIngredientsRawmaterial'";
            sRaw = sRaw + "  id=' txtRawName'>";
            tdRawName.innerHTML =  sRaw;
            
            //adding quantity TD
            tdQty = document.all.tblIngredientsTD.rows[document.all.tblIngredientsTD.rows.length-1].insertCell();
            sQty =  "<input type='text' class='clsIngredientsQuantity'";
            sQty = sQty + " id='" + tRawQty + txtRawQty'>";
            tdQty.innerHTML =  sQty;
            
            //adding uom TD
            tdUnit = document.all.tblIngredientsTD.rows[document.all.tblIngredientsTD.rows.length-1].insertCell();
            sUnit = "<select class='clsIngredientsUOM' id='cboRawUnit'><option>Liters</option></select></td>";
            tdUnit.innerHTML =  sUnit;
            
            //adding 'add' button
            tdAdd =  document.all.tblIngredientsTD.rows[document.all.tblIngredientsTD.rows.length-1].insertCell();
            sAdd = "<img style='cursor:hand' src='images/but_add.gif' onclick='addRow();'>"
            tdAdd.innerHTML = sAdd;
            
            //adding 'remove' button
            tdRemove =  document.all.tblIngredientsTD.rows[document.all.tblIngredientsTD.rows.length-1].insertCell();
            sRemove = "<img style='cursor:hand' src='images/but_remove.gif'>"
            tdRemove.innerHTML = sRemove;
            
            //adding 'lookup' button
            tdLookup =  document.all.tblIngredientsTD.rows[document.all.tblIngredientsTD.rows.length-1].insertCell();
            sLookup = "<img style='cursor:hand' src='images/but_lookup.gif'>"
            tdLookup.innerHTML = sLookup;
                        
      }
</script>




Thankx in advance
Latha
0
Comment
Question by:slathakamatchi
6 Comments
 

Accepted Solution

by:
haisharan earned 20 total points
ID: 11682961
Hi Latha,

Instead of giving directly in the table borde color u may give into your class. I have updated your .clsLstTableContentTD. Try this.
 
 .clsLstTableContentTD
{
     BORDER-BOTTOM-WIDTH: 1px;
     BORDER-LEFT-WIDTH: 1px;
                BORDER-RIGHT-WIDTH: 0px;
                BORDER-TOP-WIDTH: 0px;
     LETTER-SPACING:1px;
     color:#ffffff;
}

0
 
LVL 3

Assisted Solution

by:ashleydb
ashleydb earned 20 total points
ID: 11683264
Try having:
<TD bgcolor="red"></TD> instead of <TD bgcolor='red'></TD>
Have " instead of ' for any attributes, like class="blah" etc.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11684372
You could of course set a universal style for <td> with background:red;, but if you have other <td> cells on your page, you should make a class, maybe .red with background:red;

Then, you can set the <td> classname with DOM:
tdRawName.className = "red"

Regards,
${Zyloch}

0
 
LVL 3

Expert Comment

by:travisjhall
ID: 11687551
The others are right, you should be setting your background colours using CSS. Doing so might fix your problem. To tell the truth, though, it might not, because the combination of CSS properties and deprecated HTML formatting properties you have used is, simply, very ugly.

My advice would be to switch to doing all your formatting using CSS. If you can't get this past the validator on the W3C's website (http://www.w3.org), you aren't using enough CSS. Then, once you've done that, it should be a lot easier to tackle the problem of getting individual bits of formatting right. Things will be a lot more predictable when you don't have to worry quite so much about how the different approaches interact (something that will be different in different browsers, too).

Once you've done that, you may find that it is relevant to know that the background colour on an individual element can be set with:
td.style.backgroundColor = 'red'
where td is the td object in question.

But I'd guess that using classes, as the others have suggested, would be better for what you are trying to do.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

947 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

22 Experts available now in Live!

Get 1:1 Help Now