Solved

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

Posted on 2004-07-30
6
273 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
This video teaches users how to migrate an existing Wordpress website to a new domain.
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.

763 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

11 Experts available now in Live!

Get 1:1 Help Now