JQUERY Table Data selecting and adding style

We have already known How the jquery selector or the factory works. you can read again here.

Jquery Dollar Sign and parentheses Analysis

In this post we will learn how to select the table elements using the factory and edit them or add different styles to them. "SEEING IS BELIEVING", so let's look at the following table.

Jquery	Amazing	Tutorial
Try	IT	Yourself
Have	More	Fun
Find	More	queries

if you look at the html you'll see I have added no style to it. the borders, backgrounds are applied to it using jquery. Now take a look at javascript code.

$('#test3').css('border','1px solid black');
$('#test3 td').css('border','1px solid black');
$('#test3 tr').filter(':even').css('background-color','green');

$('#test33').click(function(){
$('#test3 tr').filter(':even').animate({opacity:'toggle'},'slow');
});


(':even') and (':odd') are the built-in selectors that you can use to select the even and odd elements of any parent element.
we can also use the custom selector like this.

$('#test3 td:contains(More)').css('background-color','red');
lets see the output by clicking the following button


You can see the top table columns containing more has been colored red

That's all for now. There will be more posts on DOM-manipulating