Here we will learn how to traverse and change the style of the cell next to each cell that contains the specific text or content. Here we will see how we can customize the styles of the cells using some specific conditions with the help of the following jquery methods:
1.) addClass()
2.) next()
3.) nextAll()
4.) siblings()
5.) addBack()
6.) parent()
7.) prev()
8.) prevAll()
For Example: Now create an html file “test.html” and another file “traversal.js”
First let us write the code for the test.html file.
<!--doctype html-->
<html>
<head>
<title>Example addClass Jquery</title>
<style type='text/css'>
/*this styling will implemented on the html element td that contains the selected text by the selector */
.fontstyle {
color:blue;
font-family:arial;
font-size:100%;
text-align:center;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="traversal.js"></script>
</head>
<table>
<tbody>
<thead>
<tr><td>Sport</td><td>Event date</td><td>Event Location</td></tr>
</thead>
<tr><td>Parachuting</td><td>10 Feb 2016</td><td>Himachal</td></tr>
<tr><td>Paragliding</td><td>12 Feb 2016</td><td>Kashmir</td></tr>
<tr><td>Aquajogging</td><td>11 Feb 2016</td><td>Dehradun</td></tr>
<tr><td>Diving</td><td>12 Feb 2016</td><td>Nanital</td></tr>
<tr><td>Gliding</td><td>28 Feb 2016</td><td>Kashmir</td></tr>
<tr><td>Water Polo</td><td>12 Feb 2016</td><td>Chandigarh</td></tr>
<tr><td>Aquajogging</td><td>22 Feb 2016</td><td>New Delhi</td></tr>
<tr><td>Aerobatics</td><td>12 Feb 2016</td><td>New Delhi</td></tr>
<tr><td>Gliding</td><td>28 Feb 2016</td><td>Himachal</td></tr>
<tr><td>Ballooning</td><td>02 Mar 2016</td><td>Goa</td></tr>
<tr><td>Aquajogging</td><td>03 Mar 2016</td><td>Dehradun</td></tr>
</tbody>
</table>
</body>
</html>
In our traversal.js file we write the following code or we can add the following code in our test.html file, (Comment each line to see the output and leave the one uncommented to see the specific changes for that code in the table).
$(document).ready(function() {
// example for addClass(): This changes all the elements which has the selected text i.e. Himanchal
$('td:contains(Himachal)').addClass('fontstyle');
// example for next(): This changes the very next elements to the selected text 11 Feb 2016 22 //Feb 2016 03 Mar 2016 will change according to the class fontstyle.
$('td:contains(Aquajogging)').next().addClass('fontstyle');
//example for nextAll(): This changes all the elements next to the selected text and 02 Mar 2016 Goa will change.
$('td:contains(Ballooning)').nextAll().addClass('fontstyle');
// example for prev(): This changes the very next elements to the selected text 02 Mar 2016 will change according to the class fontstyle.
$('td:contains(Goa)').prev().addClass('fontstyle');
//example for nextAll(): This changes all the elements previous to the selected text i.e. Ballooning 02 Mar 2016 well change according to the fontstyle.
$('td:contains(Goa)').prevAll().addClass('fontstyle');
//example for siblings():This changes all the elements after or before the selected text (DOM level is same)
$('td:contains(12 Feb 2016)').siblings().addClass('fontstyle');
//example for nextAll() and addBack():This changes all the elements next to the selected text along with the selected text
$('td:contains(Aquajogging)').nextAll().addBack().addClass('fontstyle');
//example for parent(): This makes changes by going one level up the DOM and make the changes
$('td:contains(Chandigarh)').parent().addClass('fontstyle');
});
0 Comment(s)