What is the equivalent of setAttribute on IE?

**acoder** · Dec 8 '10, 01:20 PM

Try:

Code:

td.style.color = "..."; // and so on

Alternatively, put the CSS in a class and then:

Code:

td.setAttribute("className","...");

**Claus Mygind** · Dec 9 '10, 11:39 PM

Thanks acoder for setting me straight and showing me the way back to the future.

To get something that is cross-browser friendly, we have to trash the "setAttribu te" method and use a simple object property method instead. By doing so (at least for modern browsers). Luckily for me I did not have to go all the way back to the stone age. Here is what I got to work

Code:

		var tr, td;
		var tbody = document.getElementById('caches');
		tr = tbody.insertRow(tbody.rows.length);
		td = tr.insertCell(tr.cells.length);
//		td.setAttribute("colspan", "7");
//		td.setAttribute("style", "color:#FFFF00; background-color:#D64203; text-align:center;");
		td.colSpan = "7";
		td.bgColor = "#D64203";
		td.style.color="#FFFF00";
		td.align = "center";
		td.innerHTML = "<b>*** Caches Attempted On: "+cDate+" ***</b>";

What I neatly had contained in two lines of code now has been separated into 4 lines of code (it could have been worse).

We start with 2 blank variables tr and td.
tbody is an object we create by inheriting from the document object 'caches' on line 2.

tr = tbody.insertRow (tbody.rows.len gth) on line 3 lets us create a row object that is appended to the tbody object. It takes the place of the two lines of code shown in the example below:
oRow = document.create Element("TR");
oBody.appendChi ld(oRow);

Then
td = tr.insertCell(t r.cells.length) ; on line 4 lets us create a cell and append it onto the tr object we just created.
which take the place of these two line shown in the example below:
oCell = document.create Element("TD");
oRow.appendChil d(oCell);

By the way acoder your other suggestion of adding the styles into a class, did not work for me as it still relied on the "setAttribu te" method.

By worse I mean the following code which uses "appendChil d". That also would have worked.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 <script type="text/javascript">
 <!--

function fnInit()
{
  // Declare variables and create the header, footer, and caption.
  var oTable = document.createElement("TABLE");
  var oTHead = document.createElement("THEAD");
  var oTBody0 = document.createElement("TBODY");
  var oTBody1 = document.createElement("TBODY");
  var oTFoot = document.createElement("TFOOT");
  var oCaption = document.createElement("CAPTION");
  var oRow, oCell;
  var i, j;

  // Declare stock data that would normally be read in from a stock Web site.
  var heading = new Array();

  heading[0] = "Stock symbol";
  heading[1] = "High";
  heading[2] = "Low";
  heading[3] = "Close";

  var stock = new Array();

  stock[0] = new Array("ABCD","88.625","85.50","85.81");
  stock[1] = new Array("EFGH","102.75","97.50","100.063");
  stock[2] = new Array("IJKL","56.125","54.50","55.688");
  stock[3] = new Array("MNOP","71.75","69.00","69.00");


  // Insert the created elements into oTable.
  oTable.appendChild(oTHead);
  oTable.appendChild(oTBody0);
  oTable.appendChild(oTBody1);
  oTable.appendChild(oTFoot);
  oTable.appendChild(oCaption);
  
  // Set the table's border width and colors.
  oTable.border=1;
  oTable.bgColor="lightslategray";
  
  // Insert a row into the header and set its background color.
  oRow = document.createElement("TR");
  oTHead.appendChild(oRow);
  oTHead.setAttribute("bgColor","lightskyblue");
  
  // Create and insert cells into the header row.
  for (i=0; i<heading.length; i++)
  {
    oCell = document.createElement("TH");
    oCell.innerHTML = heading[i];
    oRow.appendChild(oCell);
  }
  
  // Insert rows and cells into bodies.
  for (i=0; i<stock.length; i++)
  {
    var oBody = (i<2) ? oTBody0 : oTBody1;
    oRow = document.createElement("TR");
    oBody.appendChild(oRow);
    for (j=0; j<stock[i].length; j++)
    {
      oCell = document.createElement("TD");
      oCell.innerHTML = stock[i][j];
      oRow.appendChild(oCell);
    }
  }
  
  // Set the background color of the first body.
  oTBody0.setAttribute("bgColor","lemonchiffon");
  oTBody1.setAttribute("bgColor","goldenrod");
  
  // Create and insert rows and cells into the footer row.
  oRow = document.createElement("TR");
  oTFoot.appendChild(oRow);
  oCell = document.createElement("TD");
  oRow.appendChild(oCell);
  oCell.innerHTML = "Quotes are for example only.";
  oCell.colSpan = "4";
  oCell.bgColor = "lightskyblue";
  
  // Set the innerHTML of the caption and position it at the bottom of the table.
  oCaption.innerHTML = "Created using Document Object Model."
  oCaption.style.fontSize = "10px";
  oCaption.align = "bottom";
  
  // Insert the table into the document tree.
  oTableContainer.appendChild(oTable);
}


 //-->
 </script>  
</head>

 <body onload="fnInit();">
<div id="oTableContainer">
</div>
 </body>
</html>

**acoder** · Dec 10 '10, 11:22 AM

You could use td.className = "..."; which should work cross-browser.

One other thing: some of your changes could be better implemented, e.g.

Code:

td.style.backgroundColor = "#D64203";
td.style.textAlign = "center";

PS. I think cssText works in IE in place of

Code:

td.setAttribute("style"...

**Claus Mygind** · Dec 10 '10, 01:09 PM

Thanks for the excellent advise acoder. Used td.className
In my css file

Code:

.dateLine { 
	color: #FFFF00;
	background-color: #D64203;
	text-align: center;
	font-size: 36px;
}

And in my javaScript file

Code:

		td.className = "dateLine";

Now what about the column span line.

Code:

//		td.setAttribute("colspan", "7");
		td.colSpan = "7";

Has that been added to css? What are my options?

**acoder** · Dec 13 '10, 11:23 AM

Colspan doesn't really make sense in CSS, so the colSpan property that you've used on the td element is correct. If using setAttribute, the case would be the same, i.e. "colSpan" instead of "colspan".

What is the equivalent of setAttribute on IE?

What is the equivalent of setAttribute on IE?

Comment

Comment

Comment

Comment

Comment