View Full Version : setting attributes

05-11-2004, 05:48 PM
This is just me messing about with stuff, but I've got the following function:

function addRow(objRow){
var myTable=document.getElementById("t1");
var myRowID=objRow.id;
var myRowIndex=objRow.rowIndex;
var totalCells=myTable.rows[myRowIndex].cells.length;
var newRow = myTable.insertRow(myRowIndex+1);
for (i=1;i<=totalCells;i++){
var cellText="-";
var newCell = newRow.insertCell();
newCell.innerHTML = cellText;
}else if(i==2){
var cellText="+";
var newCell = newRow.insertCell();
newCell.innerHTML = cellText;
var cellText="Row: "+parseInt(myRowIndex+1)+"<br>Cell: "+i;
var newCell = newRow.insertCell();
newCell.innerHTML = cellText;

Which, as you might have guessed, is meant to:
a) create a new row below the current one (it's called via an onClick in a TD that sends the TD's parentElement as an argument)
b) fill that row with cells.

Now this is, obviously, my first effort at messing about with nodes, creating elements directly, (rather than just rewriting innerHTML for example) and the suchlike. Any comments on how I should be doing this better would be gratefully appreciated.

However, I have one specific issue, which is that I'd like to give certain attributes to the first two cells in a new row. This works with some attributes (newCell.setAttribute('width','200');) but not others (newCell.setAttribute('style','font-weight:bold;');) and I'm not sure why.

Any suggestions?

05-11-2004, 06:37 PM
Yea, you can't set styles like that.

You have to do something like the following:

newCell.style.fontWeight = "bold";

Here's the reference I used:

As far as doing what you're trying to do a better way... can't help you there. I just do whatever works most of the time! Perhaps someone like liorean will come along and lend you some advice on that..

Hope that helps,

05-11-2004, 09:20 PM
It's not that you can't setAttribute("style", "bla"), but rather that IE has a buggy DOM implementation and doesn't understand that. An alternative would be theelementobject.style.cssText = "bla";

05-12-2004, 11:54 AM
OK, thanks for the replies. Two further questions, though.

Firstly, can I do this:


Only it's not doing anything for me.

Secondly, I seem to be setting the attribute correctly here:


but the table that gets produced looks like it would if you'd missed a couple of TD's off a TR and not set the colspan to compensate.

What am I doing wrong?

05-12-2004, 08:03 PM
I can answer your first question (at least I think I can), it should read:

objTD.setAttribute("onMouseOver","function() { document.getElementById('objTD').style.backgroundColor='#009900'; };");

On second thought, that might not actually work out for you... unless objTD is the id of that TD. Are you going through a loop or something?

I think we'll need a second opinion on that one..

As for your second question, I think we'll need to see your table setup to see how or why that's happening. You can also alert the innerHTML of the table to see what the coding behind that table is and then you can debug backwards and figure out what's going on..

Hope that helps,

05-12-2004, 08:09 PM
You can, but shouldn't, set event handlers using setAttribute. Use the regular element.onevent=blah... syntax for that.

05-13-2004, 02:34 PM
Ok, uh - here's the code. A work in progress, obviously :o

liorean: sorry, but could you show me an example? I tried removeCell.onMouseOver=removeCell.style.backgroundColor='#009900'; as well as the function() thingy in the code below, but nothing is working for me.

And the colspan is definitely showing up after I've set it - it's in the TD's attributes collection and in the TR's innerHTML. But the table still appears malformed :(

<title>tably thing</title>

<style type="text/css">
th{font-family:Tahoma; font-size:10pt; font-weight:bold; color:black; background-color:#666666;}
td{font-family:Tahoma; font-size:9pt; color:black;}
.bggreen{font-family:Tahoma; font-size:12pt; color:white;background-color:#006600; cursor:hand; text-align:center;}
.bgred{font-family:Tahoma; font-size:12pt; color:white;background-color:#660000; cursor:hand; text-align:center;}

<script language="JavaScript">
function getAttributes(obj){
for(var i=0;i<obj.attributes.length;i++){
alert(obj.attributes[i].nodeName + "=" + obj.attributes[i].nodeValue);

function addRow(objRow){
var myTable=document.getElementById("t1");
var myRowID=objRow.id;
var myRowIndex=objRow.rowIndex;
var newRow = myTable.insertRow(myRowIndex+1);
var totalCells=myTable.rows[myRowIndex].cells.length;
var myColSpan=totalCells-2;

var removeCell = newRow.insertCell();
removeCell.innerHTML = "-";
removeCell.style.backgroundColor = "#006600";
removeCell.style.cursor = "hand";
removeCell.style.textAlign = "center";
removeCell.style.color = "white";

var addCell = newRow.insertCell();
addCell.innerHTML = "+";
addCell.style.backgroundColor = "#660000";
addCell.style.cursor = "hand";
addCell.style.textAlign = "center";
addCell.style.color = "white";

var otherCells = newRow.insertCell();
otherCells.innerHTML = "This is a new cell in the table it should be three columns wide but it doesn't look like it.";

function removeRow(objRow){
var myTable=document.getElementById("t1");
var myRowID=objRow.id;
var myRowIndex=objRow.rowIndex;



<table id="t1" cellpadding=3 cellspacing=0 border=1 style="width:70%;">
<tr id="r0">
<th id="c0_0">&nbsp;</td>
<th id="c0_1">&nbsp;</td>
<th id="c0_2">One</td>
<th id="c0_3">Two</td>
<th id="c0_4">Three</td>

<tr id="r1">
<td class="bggreen" id="c1_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c1_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c1_2">c1_2</td>
<td id="c1_3">c1_3</td>
<td id="c1_4">c1_4</td>
<tr id="r2">
<td class="bggreen" id="c2_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c2_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c2_2">c2_2</td>
<td id="c2_3">c2_3</td>
<td id="c2_4">c2_4</td>
<tr id="r3">
<td class="bggreen" id="c3_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c3_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c3_2">c3_2</td>
<td id="c3_3">c3_3</td>
<td id="c3_4">c3_4</td>
<tr id="r4">
<td class="bggreen" id="c4_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c4_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c4_2">c4_2</td>
<td id="c4_3">c4_3</td>
<td id="c4_4">c4_4</td>
<tr id="r5">
<td class="bggreen" id="c5_0" onMouseOver="this.style.backgroundColor='#009900'" onMouseOut="this.style.backgroundColor='#006600'" onClick="removeRow(this.parentElement)">-</td>
<td class="bgred" id="c5_1" onMouseOver="this.style.backgroundColor='#990000'" onMouseOut="this.style.backgroundColor='#660000'" onClick="addRow(this.parentElement)">+</td>
<td id="c5_2">c5_2</td>
<td id="c5_3">c5_3</td>
<td id="c5_4">c5_4</td>


05-13-2004, 06:40 PM


and see how that works...