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

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
slathakamatchiAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
haisharanConnect With a Mentor Commented:
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
 
ashleydbConnect With a Mentor Commented:
Try having:
<TD bgcolor="red"></TD> instead of <TD bgcolor='red'></TD>
Have " instead of ' for any attributes, like class="blah" etc.
0
 
ZylochCommented:
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
 
travisjhallCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.