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

[Aaron Wilt]

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?

    
var abas = text.split("|");

for (var i = 0; i < abas.length; i++)
{
if (!abas[i] || abas[i] == null)
{
break;
}

var abaCombo = abas[i].split(":"); // data to display in rows

// create the row of the table
var row = document.createElement("tr");
row.setAttribute("id", "id_" + i);
[B]row.style.border = "border-width: 1px; border-color: #8EB5AF;border-style: solid";[/B]
 
// create the columns
var abaCol = document.createElement("td");
var diCol = document.createElement("td");

// place the text inside the columns
abaCol.appendChild(document.createTextNode(abaCombo[0]));
diCol.appendChild(document.createTextNode(abaCombo[1]));

// place the columns inside the row
row.appendChild(abaCol);
row.appendChild(diCol);

// place the row inside the table
tblResults.appendChild(row);  // tblResults references an existing <tbody> tag
}
 

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]

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

row.className = "someRowStyle";

[Aaron Wilt]

Hi Gregg,

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



Aaron

[Eric Pascarello]

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

var foo = "foo1=123;foo2=234;foo3=345;"

in reality you want

var foo1 = 123;
var foo2 = 234;
var foo3 = 345;

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)

row.style.borderWidth = "1px"; 
row.style.borderColor = "#8EB5AF";
row.style.borderStyle = "solid";

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.

row.style.border = "1px solid #000000";

Hopefully I shed some light on this matter

Eric

[Aaron Wilt]

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...

    
for (var i = 0; i < abas.length; i++)
{
if (!abas[i] || abas[i] == null)
{
break;
}

var abaCombo = abas[i].split(":"); // abaCombo is an array with [ABA#, legal_name]

// create the row of the table
var row = document.createElement("tr");
row.setAttribute("id", "id_" + i);
[B]row.style.borderWidth = "1px"; 
row.style.borderColor = "#8EB5AF";
row.style.borderStyle = "solid";[/B]

// create the columns
var abaCol = document.createElement("td");
var diCol = document.createElement("td");

// place the text inside the columns
abaCol.appendChild(document.createTextNode(abaCombo[0]));
diCol.appendChild(document.createTextNode(abaCombo[1]));

// place the columns inside the row
row.appendChild(abaCol);
row.appendChild(diCol);

// place the row inside the table
tblResults.appendChild(row);
}

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]

Looks like you have to apply it at the cell level...

Here is another way of doing it:

<table id="table1" cellpadding="0" cellspacing="0" style="border:1px 
 
solid #000; border-collapse: collapse;">
  <thead>
    <tr>
      <th>ID</th>
      <th>code</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    </tr>
  </tbody>
</table>
 
<script>
 
var table = document.getElementById("table1");
 
for(var i = 0; i<10;i++){
  var newRow = table.insertRow();
  var cell1 = newRow.insertCell();
  var cell2 = newRow.insertCell();
 
  cell1.innerHTML = i;
  cell2.innerHTML = Math.floor(Math.random()*1000);
 
  newRow.style.backgroundColor = (i%2==0)?"#CCC":"#EEE";
 
  cell1.style.borderTop = "1px solid #000";
  cell2.style.borderTop = "1px solid #000";
 
}
</script>

Eric

[Aaron Wilt]

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