Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2004-07-30
6
Medium Priority
?
284 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 80 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 80 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

604 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