Highlight GridView Row By Clicking in ASP.NET using JQuery

First of all we need to define a style class to highlight the row by clicking we can do it in header section of the page

<style> .selectedRow { background-color: yellowgreen !important; } </style>




then here is our JavaScript function




<script type="text/javascript">

        function pageLoad(sender, args) {

            $('#<%=grdBatch.ClientID %>').delegate('tr', 'click', function () {

                $('#<%=grdBatch.ClientID %> tr').not(this).removeClass('selectedRow');

                $(this).toggleClass('selectedRow');

            });

        }

    </script>




here is the gridview control




<asp:GridView ID="grdBatch" runat="server" ShowHeader="true" AutoGenerateColumns="False" ItemType="DataModel.Student" EmptyDataText="No records found" Width="100%" > <Columns> <asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-CssClass="first" ItemStyle-CssClass="first"> <HeaderStyle HorizontalAlign="Left" /> </asp:BoundField> </Columns> </asp:GridView>