aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Using DOM to create objects, but the styles aren't working? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Java 8 in Action this week in the Java 8 forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Using DOM to create objects, but the styles aren Watch "Using DOM to create objects, but the styles aren New topic
Author

Using DOM to create objects, but the styles aren't working?

Aaron Wilt
Ranch Hand

Joined: Sep 26, 2001
Posts: 49
Hi all,

I'm having an odd problem. I'm using document.createElement() to create dynamic rows and columns and sticking them in a table I've created. The problem occurs when I try to set a style on the row...nothing happens? Ideas?



The odd part is I've tried changing be bolded line to use row.style.borderColor
row.style.borderWidth
row.style.borderStyle etc but it still doesn't work.

When I use the script debugger, I can reference these above lines in the immediate window and the values ARE being set correctly, but when the page is displayed the borders do not display. So weird.

Any ideas?

Thanks!

Aaron
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15290
    
    6

Try putting the styles in a stylesheet and applying that stylesheet through the className function.

row.className = "someRowStyle";


GenRocket - Experts at Building Test Data
Aaron Wilt
Ranch Hand

Joined: Sep 26, 2001
Posts: 49
Hi Gregg,

Thanks so much for the reply. Unfortunately your suggestion didn't work. I'm very puzzled here.



Aaron
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
this is not valid,

row.style.border = "border-width: 1px; border-color: #8EB5AF;border-style: solid";

Lets look at it in a variable aspect and not with CSS

you are saying

in reality you want

so you have two options first, break it out like I did the variables: (words with dashes become camel case for setting the property with JavaScript)

Second option: Border does allow you to define all the properties in one line, you do not specify what it means, it is smart enough in the backend to figure it out.

Hopefully I shed some light on this matter

Eric
Aaron Wilt
Ranch Hand

Joined: Sep 26, 2001
Posts: 49
Eric,

Thanks for the reply. You are correct, in my haste I combined the two syntax into one which made the code invalid. I've changed the code to break it out...



Unfortunately it's the same scoop... the row styles are still not being displayed?

Thanks again for everyone's time and thoughts on this one.

Aaron
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Looks like you have to apply it at the cell level...

Here is another way of doing it:



Eric
Aaron Wilt
Ranch Hand

Joined: Sep 26, 2001
Posts: 49
Eric,

Thank you so much. Putting the styles on the <td> level worked! You're a life saver.

Seems odd that they decided to implement it that way...

Thanks again to everyone that replied,

Aaron
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Using DOM to create objects, but the styles aren't working?
 
Similar Threads
Create dynamic input text type in a table
how to implement dynamic rows paging when user clicks next or previous links
Help me to have a sortable table in my html profile!
Adding a row to a HTML table on-the-fly
dynamic table in java script