locked
Highlight unhighlight header column cell RRS feed

  • Question

  • User-809753952 posted

    When a gridview cell is clicked, I can use the following snippet to highlight and unhighlight the third cell in the same row.

     $("#GridView1 tr :text").focus(function () {    
                    var currentRow = $(this).closest("tr");
                    currentRow.find("td:eq(3)").addClass("highlight");                
                }); 
    
                $("#GridView1 tr :text").blur(function () {
                    var currentRow = $(this).closest("tr");
                    currentRow.find("td:eq(3)").removeClass("highlight");
                });
    
    

    How can I highlight the corresponding column cell in the header row? Please help.

    Tuesday, March 3, 2020 11:21 AM

All replies

  • User-1330468790 posted

    Hi, mnmhemaj,

    What you need to do is simply select the header and add/removeClass.

    However, if you want to highlight the third cell, you need to find the third cell by using "eq(2)" since the 'eq' is a 0-base function.

    Or, possibly you have a command column at the beginning?

    Script:

    <script type="text/javascript">
    
            $().ready(function () {
                console.log("222");
                $("#GridView1 tr :text").focus(function () {
                    var currentRow = $(this).closest("tr");
                    currentRow.find("td:eq(2)").addClass("highlight");
                    $("#GridView1 tr th:eq(2)").addClass("highlight");
                    
    
                });
    
                $("#GridView1 tr :text").blur(function () {
                    var currentRow = $(this).closest("tr");
                    currentRow.find("td:eq(2)").removeClass("highlight");
                    $("#GridView1 tr th:eq(2)").removeClass("highlight");
                });
            });
    
        </script>

    Demo:

    Hope this can help you.

    Best regards,

    Sean

    Wednesday, March 4, 2020 2:22 AM