Solved

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

Posted on 2004-07-30
6
279 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

726 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