asked on

Element Classname

Hi together,

i got this function here, which creates a html table from a javascript array. Now my problem is that i want to have mouseovers on the listitems, so i need to somehow set the onmouseover / onmouseout events for each table row. As you can see in the following function, i have three lines of deactivated code in the middle; those are what is left from my approach to solve this problem myself. It does not work for me that way. Maybe you know a solution?

------------->

      function updateFileList(tableID) {

            var thisCell, thisRow;
            var iCol, iRow;
            var thisText;

            tableObject = document.getElementById(tableID);

            for (iRow = 0; iRow < fileArray.length; iRow++) {

                  thisRow = tableObject.insertRow();

                  for (iCol in fileArray[iRow]) {

                        thisCell = thisRow.insertCell();

                        // var myNode = document.createAttribute("onmouseover");
                        // myNode.nodeValue = "this.className='fm-listelement-on';";
                        // thisRow.setAttributeNode(myNode);

                        thisText = document.createTextNode(fileArray[iRow][iCol]);
                        thisCell.appendChild(thisText);
                        thisCell.className = 'fm-listelement';


                  }

            }

            cancelFileUpload();

      }

COBOLdinosaur

According to the specification the name of the property is value, not nodeValue so it should be:

function updateFileList(tableID) {

var thisCell, thisRow;
var iCol, iRow;
var thisText;

tableObject = document.getElementById(tableID);

for (iRow = 0; iRow < fileArray.length; iRow++) {

thisRow = tableObject.insertRow();

for (iCol in fileArray[iRow]) {

thisCell = thisRow.insertCell();

var myNode = document.createAttribute("onmouseover");
myNode.value = "this.className='fm-listelement-on';";
thisRow.setAttributeNode(myNode);

thisText = document.createTextNode(fileArray[iRow][iCol]);
thisCell.appendChild(thisText);
thisCell.className = 'fm-listelement';

}

}

Cd&

spiritwithin

ASKER

Hey & Thanks for first.

I tried it out but it doesnt seem to work. The browser doesnt produce any error. I thought about maybe that the node value has to be set before the row is inserted (?) but i wouldnt know how to accomplish this since it wont work on thisRow before setting it to the next insertRow() in the table.

Any ideas?

COBOLdinosaur

It should not be inside the loop the event is on the row so:

for (iRow = 0; iRow < fileArray.length; iRow++) {

thisRow = tableObject.insertRow();
var myNode = document.createAttribute("onmouseover");
myNode.value = "this.className='fm-listelement-on';";
thisRow.setAttributeNode(myNode);

for (iCol in fileArray[iRow]) {

thisCell = thisRow.insertCell();
thisText = document.createTextNode(fileArray[iRow][iCol]);
thisCell.appendChild(thisText);
thisCell.className = 'fm-listelement';

}

The problem may be that the event is not an event, but is just being treated as a string.

If that is the case we have to try attachEvent() but I think that is IE only. Tty this first and if it doesen't work I'll look at attachEvent and see if there is FF support for it or something like it.

Cd&

Cd&

spiritwithin

ASKER

Hey,

i tried it out. Actually it shouldnt make a difference since to the result, although while inside the loop for the columns the node value is being set as often as there are columns in the table which is quite a botch. So thanks for bringing my attention to this matter.

However it does not work. I did not try that attachEvent() thing because i would like to assure compatibility for at least also Mozilla.

I would greatly appreciate any help on this.

Thank you very much.

Leo

<<Edited by COBOLdinosaur, page editor>>

ASKER CERTIFIED SOLUTION

dakyd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

If that does not get it into the dom correctly I found the MOZ equivelant of attachEvent. For FF we can use addEventListener:

http://www.mozilla.org/docs/dom/domref/dom_el_ref31.html

Cd&

COBOLdinosaur

A good description and comparison to the event registration here:

http://www.quirksmode.org/js/events_advanced.html

Cd&

spiritwithin

ASKER

Hey guys,

first of all: no problem for removing that. Sorry for not knowing about this rule in your members agreement.

I tried what dakyd suggested, but without any success. I also do never get any errors from the browser. Strange.

I will have a look at the links you posted, but since i am covered way enough with work i wouldnt feel bad about if anyone is able to provide a workig solution.

Cheers,
Leo

spiritwithin

ASKER

Ok, i found that the problem now lies within the classname setting somewhere, but the onmouseover event seems to work (tested with alert() , also did with the code suggestions before, but no success there).

Anyway, the issue is solved since the problem now resides on a different point.

I will close the thread providing the points to dakyd who brought the working solution.

Just a question aside: since i fill that table dynamically, the page element offsets do not update. This means that any element position requested after the table has been filled are still the old ones. Does anyone know a solution to this? Sort of a page redraw command,.. dont know..

Would be nice.

Regards,
Leo

spiritwithin

ASKER

Hm, weird. I can't get it to work. Not even if i set thisRow.className = "fm-listelement" first. Output of .className ( alert(this.className) ) in the onmouseover event function works well and shows what is set.

When i alert(this.className) after setting it, it shows what it should: fm-listelement-on .. but the properties of the style are not shown : (

spiritwithin

ASKER

Okay : )

I am too fast in writing and too slow in thinking.

I found the problem - it was the .className = "fm-listelement" setting for each column in the row which was taken as higher priority by the browser so the new class for the corresponding row has not been updated.

Problem solved.

Thank you very very much