JQuery and CSS Selectors: Part 6

Introduction

In this series you are going to learn all about jQuery and CSS Selectors. This post specifically shows how to style specific cell or cells. Let's first look at the problem that we will solve in this post.

Problem

I have following table (screenshot):

And it's HTML Markup:

        <table>

            <tr>

                <td>

                    Name

                </td>

                <td>

                    Subject/Papers

                </td>

                <td>

                    Qualifications

                </td>

                <td>

                    Join Year

                </td>

            </tr>

            <tr>

                <td>

                    Mr. Ranjeet Singh

                </td>

                <td>

                    IP, MySQL, Oracle

                </td>

                <td>

                    MCA, M.Phil

                </td>

                <td>

                    2010

                </td>

            </tr>

            <tr>

                <td>

                    Mr. Gopal Chandra

                </td>

                <td>

                    Java, C, C++

                </td>

                <td>

                    MCA, M.Tech(IT)

                </td>

                <td>

                    2011

                </td>

            </tr>

            <tr>

                <td>

                    Abhimanyu Kumar Vatsa

                </td>

                <td>

                    ASP.NET, C#, VB, JavaScript

                </td>

                <td>

                    ADCA, BCA, M.Sc.(IT)

                </td>

                <td>

                    2009

                </td>

            </tr>

            <tr>

                <td>

                    Sanju Lal

                </td>

                <td>

                    DC, SAD, Eng Maths

                </td>

                <td>

                    M.Sc.(IT), MCA

                </td>

                <td>

                    2011

                </td>

            </tr>

            <tr>

                <td>

                    Mahmood Alam

                </td>

                <td>

                    Linux/Unix, Networking

                </td>

                <td>

                    M.Sc.(IT), MCA

                </td>

                <td>

                    2007

                </td>

            </tr>

        </table>

Now, I want to apply style to it in such way that highlights my name "abhimanyu" above and even complete row.

In the last post (here) of this series, I already used 'contains' key to find text, but this will not solve our problem here alone. That's why jQuery has some more keys, let's talk on them.

next()

To style the cell next to each cell containing Abhimanyu, we can begin with the selector that we have already written and simply call the .next() method on the result, as follows:

nextAll()

To highlight all of the cells following the one containing 'Abhimanyu', we can use the nextAll(). Let's see.

prev(), prevAll() and siblings()

prev() and prevAll() are just counterparts of next() and nextAll, you can check it by applying. And siblights() selects all other elements at the same DOM level, regardless of whether they come before or after the previously selected element. Let's see.

Notice in above output, Qualifications are still not selected. To select it you can use 'andSelf()' with siblings() or next() or nextAll or with its counterparts. Look at syntax:

$('td:contains(M.Tech)').siblings().andSelf().addClass('lightIt');

OR

$('td:contains(M.Tech)').parent().addClass('lightIt');

Remember a saying in URDU, "Lupta Ke Her Pher Se Khuda Juda Ho Jata Hai", so don't use 'parents()' that is plural, it has different meaning.

In the next post, I will continue my talk on jQuery Selectors. I hope you like it. Thanks.