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();

      }

LVL 1
spiritwithinAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
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&
spiritwithinAuthor Commented:
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?
COBOLdinosaurCommented:
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&
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

spiritwithinAuthor Commented:
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>>
dakydCommented:
I think this should do what you want - you can set the event handlers for any element with the "onSOME_EVENT" where SOME_EVENT is the name of your event.  In this case, I've shown mouseover & mouseout, but you could the same with onclick, for example.  Hope that helps.

for (iRow = 0; iRow < fileArray.length; iRow++)
{
  thisRow = tableObject.insertRow();
  thisRow.onmouseover = function() {this.className = "fm-listelement-on";};
  thisRow.onmouseout = function() {this.className = "";};
  for (iCol in fileArray[iRow])
  {
    thisCell = thisRow.insertCell();
    thisText = document.createTextNode(fileArray[iRow][iCol]);
    thisCell.appendChild(thisText);
    thisCell.className = 'fm-listelement';
  }
}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
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&
COBOLdinosaurCommented:
A good description and comparison to the event registration here:

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

Cd&
spiritwithinAuthor Commented:
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
spiritwithinAuthor Commented:
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
spiritwithinAuthor Commented:
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 : (

spiritwithinAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.