2 Replies - 401 Views - Last Post: 09 January 2017 - 02:53 AM

#1 luckie12  Icon User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 234
  • Joined: 27-February 10

Changing table contents on hover (Jquery)

Posted 09 January 2017 - 02:29 AM

I am trying to change some table contents when i hover over my table.

The TR's have classes named 'tag1' 'tag2' etc and the actual TD's that have to be changed got a 'pricech1' 'pricech2' etc.
Now, this worked with only 1 row, but now it wont work anymore. This is my code:

for(i=0; i< 5; i++){
$('.tags'+i).mouseenter(function() {
   //alert(this.id);
   $('#pricech'+i).html("<button style='width:100px; height:50px; border:none; background:#62b22f; color:white; font-family:FS-LGHT;'>Bestel</button>");
});
}


for(i=0; i< 5; i++){
$('.tags'+i).mouseleave(function() {
   //alert(this.id);
   $('#pricech'+i).html("Working good!");
});
}



the Alert does work with the right ID.
But when i try to alert the 'i' it puts out 5 everytime, i dont know if thats what supposed to be happen but,
This is the table code with the ID's and the classes.
<table>
<tbody>
<tr>
<th>&nbsp;</th>
<th style="padding-top: 2%; padding-bottom: 2%;">Webruimte</th>
<th style="padding-top: 2%; padding-bottom: 2%;">Data verkeer</th>
<th style="padding-top: 2%; padding-bottom: 2%;">Aantal Mailbox</th>
<th style="padding-top: 2%; padding-bottom: 2%;">Mailbox grootte</th>
<th style="padding-top: 2%; padding-bottom: 2%;">MySQL Databases</th>
<th style="padding-top: 2%; padding-bottom: 2%;">Gratis Domein</th>
<th style="padding-top: 2%; padding-bottom: 2%;">Prijs</th>
</tr>
<tr id="p1" class="tags1">
<td style="font-family: FS-EXB; color: #c4226e; font-size: 20px;"><img src="{uploads_url}/Images/XSSLog.png" alt="" />Extra Small</td>
<td>1000</td>
<td>5000</td>
<td>5</td>
<td>1000 MB</td>
<td>2</td>
<td style="color: #c4226e;">Nee</td>
<td id="pricech1" style="font-family: FS-EXB; color: #ff8808; font-size: 25px; max-width: 100px;">&euro; 1,99</td>
</tr>
<tr id="p2" class="tags2">
<td style="font-family: FS-EXB; color: #c4226e; font-size: 20px;"><img src="{uploads_url}/Images/SLog.png" alt="" />Small</td>
<td>2000</td>
<td>5000</td>
<td>10</td>
<td>2000 MB</td>
<td>5</td>
<td style="color: #c4226e;">Nee</td>
<td id="pricech2" style="font-family: FS-EXB; color: #ff8808; font-size: 25px;">&euro; 2,25</td>
</tr>
</tbody>
</table>



Thanks for any help!

Is This A Good Question/Topic? 0
  • +

Replies To: Changing table contents on hover (Jquery)

#2 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6374
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: Changing table contents on hover (Jquery)

Posted 09 January 2017 - 02:34 AM

Question moved to jQuery subforum.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6374
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: Changing table contents on hover (Jquery)

Posted 09 January 2017 - 02:53 AM

The number 5 is because of the behaviour of closures, an important subject that requires study.

Javascript closure inside loops – simple practical example
(this is just one of the first relevant links I found.)

Your events hold their surrounding scope; when they are fired the value of variable i is 5.

You can improve the code, and not need the variable i, if you use event delegation. That is, you can attach a single mouseenter event to the table itself, that will fire for all tr descendants within the table. When the event fires you can determine which row of the table it relates to (index()), or read the id of the row. You can extract the number from this id.

You could even use a classname for the td, rather than individual id's, as you can find the first instance of this class within the current row to target, and modify, the row.

[I would also prefer to hide, then show, the button, rather than creating it from scratch.]



You should also move all the inline CSS into a stylesheet. For example, rather than applying the same CSS individually to every th element, you can target th elements within the table with a single rule.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1