JavaScript question

[Bethrezen]

hi all

so i have another JavaScript question how can I alter the following

Code: Select all

<script>
function hoveron(event) {
  var target = event.target.parentNode;
  target.style.cssText = "background-color:red";
}

function hoveroff(event) {
  var target = event.target.parentNode;
  target.style.cssText = "";
}

var cells = document.querySelectorAll("td");

for (i = 0; i < cells.length; i++) {
  cells[i].addEventListener("mouseover", hoveron);
  cells[i].addEventListener("mouseout", hoveroff);
}</script>

So that it will always get the table row regardless of how many children there are ?

See if I have a table like this

Code: Select all

<table>
<tr>
  <td>item 1</td>
  <td>item 2</td>
 </tr>
</table>

Everything works as expected and when I hover over one of the TDs the whole row is highlighted however if I add anchor tags then the above script brakes and instead of highlighting the row that is being hovered it highlights the TD

Now i know i could give each row an ID and then just do document.getElementById("id"); and that would probably do the trick but i feel like there has to be a cleaner way to do this there has to be some way to make the script always select the row closest to where the hover event happened.

i tried changing

Code: Select all

var target = event.target.parentNode

to

Code: Select all

var target = event.target.closest('tr');

but it doesn't appear to work, so i can only assume I'm misunderstanding how to use it and almost everything I'm finding seems to be for jquery which is neither use nor ornament to me when I'm trying to learn JavaScript.

[DanRaisch]

Moving to Third Party Builds as this involves the PaleMoon browser.

[Bethrezen]

Moving to Third Party Builds as this involves the PaleMoon browser.

Oh really are you sure about that ??

That’s a bit presumptuous isn’t it how do you know it involves Pale Moon? Pale Moon is merely the browser that I used to post the question, so wouldn’t it be better to ask me what browser I'm using to learn JavaScript in before you go making unwarranted assumptions, because as it happens I'm in fact using a portable build of Firefox to learn JavaScript in not Pale Moon since i didn't want and any of my add-ons to cause interference.

[DanRaisch]

It wasn't presumptuous when you posted using PaleMoon and did not specify in your post that you would work with the JavaScript in Portable Firefox.

[Bethrezen]

It wasn't presumptuous when you posted using PaleMoon and did not specify in your post that you would work with the JavaScript in Portable Firefox.

Well In this particular instance the browser that I'm using is irrelevant, since what I'm trying to learn here should be universally supported by any modern standards compliant browser.

With regard to my question about Element.closest(); after double checking it seems that Element.closest(); is only supported in Firefox 35 and above which probably explains why

Code: Select all

<script>
function hoveron(event) {
  var target = event.target.closest('tr');
  target.style.cssText = "background-color:red";
}

function hoveroff(event) {
  var target = event.target.closest('tr');
  target.style.cssText = "";
}

var cells = document.querySelectorAll("td");

for (i = 0; i < cells.length; i++) {
  cells[i].addEventListener("mouseover", hoveron);
  cells[i].addEventListener("mouseout", hoveroff);
}</script>

didn't work when i tried it earlier, since i was using an older version because i hate the UI changes in newer versions, this does however does provide an opportunity for some additional learning.

Ok so since Element.closest(); is pretty much exactly what I'm looking for, how would you replicate the functionality if Element.closest(); isn't supported, I ask because it's generally considered good practice to provide a fall back just in case.

[Bethrezen]

ok so I think i figured it out, so for the benefit of folk that might be looking to do something similar here is a very simple and basic way to to replicate the functionality of Element.closest();

Code: Select all

function hoveron(event)
{
  var target = event.target; //Get the element that was hovered on.

  while(target.nodeName !== "TR")
  {
    //While the currently selected element is not a table row loop.
    //Note: the tag name must be upper case or it wont work.
    //This is because the element name returned by nodeName is always upper case.
    //You can however use String toLowerCase() and fix that.

    var target = target.parentNode;
    //Get the parent of the currently selected element.
  }

  target.style.cssText = "background-color:red";
  //Change the background colour of the currently selected row to red.
}

var cells = document.querySelectorAll("td"); //get all TD elements.

//i = 0; start at index value 0.
//i < cells.length; while the index value is less that the number of table cells loop.
//i++ Increment the index value by 1 with each loop.

for (i = 0; i < cells.length; i++)
{
  cells[i].addEventListener("mouseover", hoveron); //attach a mouse over event listener to each TD
  cells[i].addEventListener("mouseout", hoveroff); //attach a mouse out event listener to each TD
}