Run
<!doctype html> <html lang="en"> <head> <title>jQuery :nth-of-type Selector Select Specified Element in a Table Cell</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table tr td span:nth-of-type(2)" ).css( "color", "red" ); }); }); </script> <style> .mytable{ border-collapse:collapse; } .mytable tr th, .mytable tr td{ border: 1px solid #ccc; } </style> </head> <body> <h2>jQuery :nth-of-type Selector Select Specified Element in a Table Cell</h2> <p><button type="button" class="mybtn">Click to Color Row</button></p> <table class="mytable"> <tr> <th>Motor Vehicle</th> <th>Price</th> </tr> <tr> <td>Car</td> <td><span>2</span> <span>Lac</span></td> </tr> <tr> <td>Tractor</td> <td><span>4</span> <span>Lac</span></td> </tr> <tr> <td>Gypsi</td> <td><span>8</span> <span>Lac</span></td> </tr> <tr> <td><span>Maruti</span></td> <td><span>3</span> <span>Lac</span></td> </tr> <tr> <td>Truck</td> <td><span>15</span> <span>Lac</span></td> </tr> </table> </body> </html>
Go to
Tutorialdeep Homepage