jQuery Tutorial - 20 - Even/odd selectors Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' org
with the video tutorial for the new
Boston in this video we are going to be
creating a table and we're going to be
using the even and at the even and odd
selectors to actually change a class of
a particular table row so I have an
index page here and what I've done is
I've included table J s as part of my
JavaScript include files and I've also
got style dot CSS which is quite
important because we're going to be
creating a class that's going to change
the tables the rows of the table evenly
or oddly now I have an example just here
you can see that we've got the first one
with the background slightly you know a
darker or lighter gray then we have
white and then we have this gray again
and then white and if this table was
longer it would continue to select the
first second fourth etc etc rows in the
table so this is all done using jQuery
so let's just go ahead and open up my
text editor again I'm going to go ahead
and create this table first of all so we
create a table here we're going to give
this a class name in just a moment but
not for now I'm just going to create
some rows and then inside that some
table data and for the first one I'm
just going to say it first row so first
row we can go ahead and copy and paste
this down to make four rows and just go
ahead and modify these accordingly so
just while I'm typing these out this
could be for example data that's
retrieved from a database table that you
might have put into a table for example
for each row of data you might be
displaying a table row and then the data
inside of this so you might want to find
an easy way to append a class to this
table in order to get the effect that
we've just looked at in my browser so
let's go ahead and continue filling this
in and we'll say which we say last or
fourth or so forth okay so we've got
these rows in the table let's just go
ahead and see what that looks like you
can see there's no borders at the moment
but we can fix that in style
ss in just a moment I'm going to go
ahead and give this table a class for
now I'm just going to call it table but
if you do want to create say tables that
display this effect you might want to go
ahead get ahead and give it a more
distinctive name but for now we're going
to keep it as table
so inside star dot CSS let's go ahead
and change the styling of this and we're
just going to go ahead and create some
borders on this so we'll say border one
pixel solid and black here we're also
going to need to say table TR and also
table TD and now just ensure that we get
borders around everything so now that
we've done this we want to go ahead and
use jQuery to highlight these even rows
or the odd rows depending so we can
actually use jQuery to select the even
rows on this table or the odd rows on
this table and then highlight them
accordingly and what we're going to need
to do is create a class that we're going
to add to each row and that class I'm
just going to call highlights so I'm
going to do in here is set the
background color of this class to F 0 F
0 F 0 which was the color that you saw
in the first part of the tutorial now
that we've done this we've completely
set up our page we've added this
highlight class as well as modified this
class that we referenced with the table
and now we can go ahead and write our
jQuery code so we're going to ensure
that the document is loaded and the Dom
is ready so we're going to say document
document ready and then inside here is a
function inside these curly brackets
here is where our code is going to be so
we'll just pull them down slightly ok so
now what we want to do is add a class to
this table now if for example we wanted
to go ahead and add a class to the
entire table we would use a selector and
we would say dot table remember it's a
class selector and then we would say dot
CSS and sorry know we could use CSS to
manually do it but we want to add this
existing class that we've created this
highlight class in our style dot CSS
file so inside here we just go ahead and
specify the class that we want to apply
to this particular element and in this
case it will just
I like the entire table however this is
obviously isn't the effect that we're
looking for the first thing we want to
do is highlight only the rows you can
see at the moment we've highlighted the
entire table we only want to highlight
the Rose so we specify table TR and this
will just highlight each table row you
can see that the gray has disappeared
from the outside borders now what we
want to go ahead and do is select only
even elements in this set so essentially
what we're doing is we're matching this
TR set and we use a colon to do this and
then we type in either even or odd and
this will select the either even or odd
table TRS so each one of these elements
will select either even or odd and then
apply that particular class here using
add class to these so now that we've
done that we can go ahead and refresh
and you can see that the effect that we
get is we've highlighted the first row
left the second row highlighted the
third row and left the fourth row and if
we were to go ahead and say modify this
and just add some more table rows let's
just go down and add some more in you
can see that we get exactly the same
effect we've highlighted the first third
fight fifth sorry yeah and so and so on
and so forth so an unlimited amount of
data we're going to use the even to
select each one and again we can change
this to odd as well and that will just
change how we do that so these are the
even and the odd selectors in jQuery and
they don't just need to be applied to
tables they can be applied to say a set
of paragraphs it entirely depends for
example we could change this to a div
for example we could say div and then
all odd paragraphs we apply the
highlight to so we're going ahead and
just quickly demonstrate this now let's
go ahead and create a div here
let's just pull that down and let's just
type what's the name that we gave this
we will just call it an area for example
so we'll give this an ID of area now
inside here we could have a few
paragraphs and all of them could contain
just from some text for example so text
1 text - text 3 and text 4 so now we
have something looking like this so now
what we can do is in table J s we can
select all the paragraphs all the odd
paragraphs inside area and add this
highlight class to them so now when we
refresh you can see that we get exactly
the same effect where we've added this
background color to each paragraph so
it's versatile in the sense that you can
use it with almost all elements even
sort of input fields you could you know
highlight every one however the main you
know useful demonstration for this is
using tables as we did initially so
that's the even and odd selectors in
jQuery