Change Font colors with dom [Archive]

b1021

12-10-2003, 06:36 PM

Does anyone know how I would change my font colors of my text if I am creating all my text in a table cell using dom? Code below

var newRow = document.createElement('tr');
var newCell = document.createElement('td');

newTxt = document.createTextNode(firstRow('opt'+SelChild,0,2) );

newCell.appendChild(newTxt);
newRow.appendChild(newCell);

TIA

Brian

Khalid Ali

12-10-2003, 09:11 PM

something like this will work

newCell.setAttribute("STYLE","color:red'");

b1021

12-10-2003, 10:42 PM

Unfortuantly it didn't work. What am I doing wrong. Is there something else I need to set up? I tried moving it around and using color=red in the setAttribute method.
Here's my code -

var newRow = document.createElement('tr');
var newCell = document.createElement('td');

newTxt = document.createTextNode(firstRow('opt'+SelChild,0,2) );

newCell.appendChild(newTxt);
newCell.setAttribute("STYLE","color:red");
newRow.appendChild(newCell);

Thanks!

Brian

fredmv

12-11-2003, 04:54 AM

What you have should (with a few slight modifications) be OK; however, I'm thinking the problem may be because you're only creating the <tr> and <td> elements with no parent <table> element. Here's a simple example I just put together in which creates the <table> element and appends all child elements and it seems to work just as expected:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
onload = function()
{
var table = document.createElement('table'), tr = document.createElement('tr'), td = document.createElement('td');
td.appendChild(document.createTextNode('foo'));
td.setAttribute('style', 'color: red');
tr.appendChild(td);
table.appendChild(tr);
document.body.appendChild(table);
}
//]]>
</script>
</head>
<body></body>
</html>

b1021

12-11-2003, 09:58 AM

I am creating the table and appending the tr and td as children of the table.

Here's my code which is on the onload event

var mybody=document.getElementsByTagName("body").item(0);

mytable = document.createElement("TABLE");

mytable.id = "myTable";
mytablebody = document.createElement("TBODY");
mytablebody.id = "myTBody";
mytable.align = "center";
mytable.setAttribute("border","1");
myform = document.createElement("<form onsubmit='return buildMyCookie();'>");
myform.id = "myForm";
myform.name = "myForm";
myform.action = "rptaction.asp";
myform.method = "POST";

var currentRows = 0;
for(j=0;j<3;j++)
{

mycurrent_row=document.createElement("TR");

for(i=0;i<2;i++)
{
if (j==0)
{
if (i==0) //this is the label
{
mycurrent_cell=document.createElement("TD");

newTxt = document.createTextNode(firstRow(eval('opt'+ParNum),currentRows,2));
mycurrent_cell.appendChild(newTxt );
mycurrent_cell.setAttribute("style","color:red"); // HERE'S MY COLOR

mycurrent_row.appendChild(mycurrent_cell);
}
else //this is the select
{
mycurrent_cell=document.createElement("TD");

var newInput = document.createElement('<Select onchange="testme(' + eval('opt'+ParNum)[0][4] + ',' + currentRows + ')">');

newInput.name = eval('opt'+ParNum)[0][4];
newInput.id = eval('opt'+ParNum)[0][4];

option1=document.createElement('option');
option1.value=0;
option1.innerHTML='Please Choose';
newInput.appendChild(option1);

for(k=0;k<eval('opt'+ParNum).length;k++)
{
option1=document.createElement('option');

option1.value=firstRow(eval('opt'+ParNum),k,3) + '_' + firstRow(eval('opt'+ParNum),k,1) + '_' + firstRow(eval('opt'+ParNum),k,5) + '_0';
option1.innerHTML=firstRow(eval('opt'+ParNum),k,0);
newInput.appendChild(option1);
}

mycurrent_cell=document.createElement("TD");
mycurrent_cell.appendChild(newInput );
mycurrent_row.appendChild(mycurrent_cell);

}

}
else if (j==1) // For the checkbox
{
if (i==0) //this is the label
{
mycurrent_cell=document.createElement("TD");

newTxt = document.createTextNode("Print as PDF");
mycurrent_cell.appendChild(newTxt );
mycurrent_row.appendChild(mycurrent_cell);
}
else
{

mycurrent_cell=document.createElement("TD");

var newInput = document.createElement('<input type=checkbox name=RptType id=type checked>');

mycurrent_cell.appendChild(newInput);
mycurrent_row.appendChild(mycurrent_cell);
}
}
else if (j==2 && i==1) //last row - for the submit box
{
mycurrent_cell=document.createElement("<TD colspan=2 align=center>");

var newInput = document.createElement('<input type=submit value=submit disabled>');
newInput.id = 'B1';
mycurrent_cell.appendChild(newInput);
mycurrent_row.appendChild(mycurrent_cell);

}
}

mytablebody.appendChild(mycurrent_row);
}

mytable.appendChild(mytablebody);
myform.appendChild(mytable);
mybody.appendChild(myform);