efno (13) [Avatar] Offline
#1
Hi, I am new to JQuery and must say that I love the book.

I am however trying to use the zebra stripes example in chapter 3 and it is working fine except when I have 3 tables on the same page with different IDs, when i hover my mouse on any table, the zebra effect happens on all 3 tables instead of just the table on which I'm hovering the mouse. I have something similar to the following:

<script type="text/javascript">

$(function(){
$("#table1 tr:nth-child(even)").addClass("striped");
$("#table1").mouseover(swapThem).mouseout(swapThem);
});

$(function(){
$("#table2 tr:nth-child(even)").addClass("striped");
$("#table2").mouseover(swapThem).mouseout(swapThem);
});

$(function(){
$("#table3 tr:nth-child(even)").addClass("striped");
$("#table3").mouseover(swapThem).mouseout(swapThem);
});

function swapThem() {
$('tr').toggleClass('striped');
}
</script>

If I hover the mouse on table1 only, the effects are seen on table1, table2 and table3 and vice versa.

What am I doing wrong? I'd like to see the effects on table1 only when I hover my mouse on table1 and table2 only for table2 etc.

Any help will be much appreciated.

Thanks
bear.bibeault (675) [Avatar] Offline
#2
Re: Chapter 3 Zebra Stripes Example
The selector in your swapThem() function applies to all <tr> elements.

So, how would you go about making it more specific? How could you change the selector or the statement to target only <tr> elements within the target table?
efno (13) [Avatar] Offline
#3
Re: Chapter 3 Zebra Stripes Example
That is exactly what I am trying to accomplish. I just wish to work with the current table.

Thanks for the response!
bear.bibeault (675) [Avatar] Offline
#4
Re: Chapter 3 Zebra Stripes Example
Using the info in chapter 2, think about you could modify this line:

$('tr').toggleClass('striped');

to limit the toggle to only <tr> elements in a specific table.
efno (13) [Avatar] Offline
#5
Re: Chapter 3 Zebra Stripes Example
Thanks for the response. Will review that chapter again.

I was thinking I would need to pass in the table id dynamically and modified the swapThem function to the following lol; as well as the call to the swapThem function to pass in the tableId in question as a string:

function swapThem(tableId) {
alert("tableID: " + tableId);
$('#' + tableId + 'tr').toggleClass('striped');
}

But i get an object when i alert the tableId coming in. You are right! There should be a cleaner and easier way to accomplish this.

Thanks for the pointer.
bear.bibeault (675) [Avatar] Offline
#6
Re: Chapter 3 Zebra Stripes Example
It would be (perhaps) easier to pass the table reference (you have it in the event handlers) and use is as the context param in the $() function
efno (13) [Avatar] Offline
#7
Re: Chapter 3 Zebra Stripes Example
I appreciate your help sir and I have modified the script to the following - I not sure I am getting or passing in the right reference to the current table. Still getting an object instead of the table id.

$(function(){
$("#table1 tr:nth-child(even)").addClass("striped");
$("#table1").mouseover(swapThem).mouseout(swapThem('#table1'));
});

$(function(){
$("#table2 tr:nth-child(even)").addClass("striped");
$("#table2").mouseover(swapThem).mouseout(swapThem('#table2'));
});

$(function(){
$("#table3 tr:nth-child(even)").addClass("striped");
$("#table3").mouseover(swapThem).mouseout(swapThem('#table3'));
});

function swapThem(context) {
$('tr', context).toggleClass('striped');
}
</script>

Still not sure what I am doing wrong.

Thanks
bear.bibeault (675) [Avatar] Offline
#8
Re: Chapter 3 Zebra Stripes Example
Hint: within an event handler, the "this" reference will point to the target of the event (in these cases, the table).

By relying upon this fact, you could vastly simplify your code.
efno (13) [Avatar] Offline
#9
Re: Chapter 3 Zebra Stripes Example
Sorry to be a nuisance - but i tried using the this keyword in the event and this is what i was getting when i tried to alert it:

$(function(){
$("#table1 tr:nth-child(even)").addClass("striped");
alert("this: " + this + ", this.id " + this.id + ", this.tagName " + this.tagName);
$("#table1").mouseover(swapThem).mouseout(swapThem(this.id));
});

this: [object HTMLDocument], this.id undefined, this.tagName undefined

Am I missing something?
bear.bibeault (675) [Avatar] Offline
#10
Re: Chapter 3 Zebra Stripes Example
Your alert is not within the event handler.
efno (13) [Avatar] Offline
#11
Re: Chapter 3 Zebra Stripes Example
Thanks for the help!

I am going to read up on event handlers tomorrow.

Appreciate the feedback!!!
efno (13) [Avatar] Offline
#12
Re: Chapter 3 Zebra Stripes Example
Thanks. Finally got this to work. Not sure if it is the optimal way though! I am going to investigate next if there is way to pass multiple selectors and binding them to the desired events, as opposed to defining an event handler for each selector (table id).

$(function(){
$('#table1')
.bind('mouseover',function(event) {
swapThem(this.id);
})
.bind('mouseout',function(event) {
swapThem(this.id);
});
});

$(function(){
$('#table2')
.bind('mouseover',function(event) {
swapThem(this.id);
})
.bind('mouseout',function(event) {
swapThem(this.id);
});
});

$(function(){
$("#table1 tr:nth-child(even)").addClass("striped");
});

$(function(){
$("#table2 tr:nth-child(even)").addClass("striped");
});

function swapThem(context) {
$('tr', '#'+context).toggleClass('striped');
}

Thanks again for the pointers!
efno (13) [Avatar] Offline
#13
Re: Chapter 3 Zebra Stripes Example
Wow! I'm loving jquery! I think i have a more robust and generic solution that will handle x amount of tables on the page.

$(function(){
$('table')
.bind('mouseover',function(event) {
swapThem(this.id);
})
.bind('mouseout',function(event) {
swapThem(this.id);
});
});

$(function(){
$("table tr:nth-child(even)").addClass("striped");
});

function swapThem(context) {
$('tr', '#'+context).toggleClass('striped');
}

Et Voila!

Thanks for the help again! I'll probably be back when i start using the dialogs - because the lab does let me close the dialog - actually have to x out the browser window. Is that the desired behavior?
sbisht (1) [Avatar] Offline
#14
Re: Chapter 3 Zebra Stripes Example
I have tried something like this:
$(document).ready(function(){
$("#table1 tr:nth-child(even)").addClass("striped");
$("#table1").mouseover(swapThem).mouseout(swapThem);

$("#table2 tr:nth-child(even)").addClass("striped");
$("#table2").mouseover(swapThem).mouseout(swapThem);
});

function swapThem(){
if(($(this).attr('id'))=="table1")
$('#table1 tr').toggleClass('striped');
if(($(this).attr('id'))=="table2")
$('#table2 tr').toggleClass('striped');

}

Thanks
maninaction (10) [Avatar] Offline
#15
Re: Chapter 3 Zebra Stripes Example
This seems to work and it's more elegant, IMHO

$(function(){
$("table tr:nth-child(even)").addClass("striped");
$('table').live('mouseover', function(){
swapThem(this);
});
$('table').live('mouseout', function(){
swapThem(this);
});

function swapThem(tbl)
{
$('tr', tbl).toggleClass('striped');
}

});
thscp1122 (4) [Avatar] Offline
#16
Re: Chapter 3 Zebra Stripes Example
I am very happy to discover your post as it will become on top in my collection of favorite blogs to visit.
URL Opener