Adding Event To Multimple Table Cells

[jimfog]

I have a table with many cells(calendar) and i want the user hover its mouse cursor over a cell(td element) the arrow to become cursor, indication that this a clickable element. Attaching to every td element a mouseover event that calls a function seems impractical. Is there any more efficient way to accomplish what i want. Here is the code i tried-and did not work:

 //function to style the mouse pointerfunction hoverelements(){var z=document.getElementsByTagName("td");z.style.cursor="pointer";}//function to add event listenerfunction load(){var z=document.getElementsByTagName("td");z.addEventListener("onmouseover", hoverelements, false);	  }document.addEventListener("DOMContentLoaded", load, false);

Any suggestions?

[thescientist]

CSS?

td:hover{  corsor: pointer;}

the reason your implementation didn't work is because getElementsTagName returns a collection. Not a single element. You would have to use a loop if you wanted to add multiple event handlers like that. But you should just be able to do it with CSS.

[dsonesuk]

And the reason you can't use css is.. td{ cursor:default;}td:hover { cursor:pointer;}

[jimfog]

You are right to mention css as a solution, but: I want, upon clicking, these td elements, linking to php scripts-this is something i am still searching how to do it. As the first step i considered using javascript to do my job, because from it, i can "go" to a php script. In the problem i have, the styling one(cursor, onmouseover), is the beginning to a larger logical process. If my sole aim was the styling, i would use css and it would end there. Anyway, i might use css after all, as you suggest, and continue the rest with javascript/php. But since the ultimate goal is that the cells, upon clicking, will lead to php scripts, why mess with css and just make the whole code(styling and logic) in javascript? Now that you have heard the "whole story" what do you think?

[thescientist]

then use a loop to create your event handlers. that's what I said was wrong with your implementation in the first place.

[dsonesuk]

like so

window.onload=function(){var ParentTable = document.getElementById("mytable");ParentTable.style.backgroundColor="yellow";childTD = ParentTable.getElementsByTagName("td");for(i=0;i<childTD.length;i++){childTD[i].onmouseover=function(){togglepointer(this);}childTD[i].onmouseout=function(){togglepointer(this);}}}function togglepointer(element){element.style.cursor=="pointer" ? element.style.cursor="default" : element.style.cursor="pointer";element.style.backgroundColor=="red" ? element.style.backgroundColor="yellow" : element.style.backgroundColor="red";}

[ShadowMage]

...since the ultimate goal is that the cells, upon clicking, will lead to php scripts, why mess with css and just make the whole code(styling and logic) in javascript?

Because semantics say that structure (HTML), presentation (CSS), and behavior (JavaScript) should be kept separate if/when possible. Do the hover effect in CSS (presentation), then add an onclick handler to each one to make them clickable (behavior).

[jimfog]

Nonetheless, there is a question that i really want to make and has to do with the code i set out in the beginning of the post and is irrelevant to the main topic of the post. I am talking about

document.addEventListener("DOMContentLoaded", load, false);

Is this the only way to make put a listener on a reediness state run on page loading? Recently i came a across with this:

$(document).ready(function() {...}

Do the above code segments do the same? Sorry for opening this issue inside another topic. Are they alternatives to each other? Or we are talking about 2 different things? I am little confused despite the fact, i believe it must be easy, it is only now i am beginning to delve into JS.

[thescientist]

the second example would be using the jQuery library. They intend to do the same thing, but you need jQuery linked in your HTML document in order to use it.

[jimfog]

the second example would be using the jQuery library. They intend to do the same thing, but you need jQuery linked in your HTML document in order to use it.

Got it. So, in core JS there is not any .ready property. It is just jQuery syntax. Thanks TheScientist.

[ShadowMage]

You could also use:

window.onload = function() {   .....}

to add a handler to run when the page has loaded. This is the "safer" way, since IE has issues with addEventListener.

[jimfog]

I am going to close this "parentheses" about the eventListeners and since some other question arise, i am going to open another topic at another moment. Regarding the original purpose this topic was made, probably i will use css to have the cursor effect. Nonetheless, dsonesuk's code is very useful and i am considering using it to attach a click event to every cell that will lead to a php script corresponding to the cellclicked.