Change table border color using JQuery

Question

I have a user control that conatins HTML, like this:

<table id="tblProgramInfo" runat="server" cellpadding="0" cellspacing="0" class="ProgramInfo">
<tr>
    <td>
        <table cellpadding="0" cellspacing="0" width="100%" class="tblProgram" abc="def">
            <tr>
                <td>
                    Some data
                </td>
            </tr>
        </table>
    </td>
</tr>

Since its a user control, their could be multiple table with same class "ProgramInfo" and "tblProgram". Now I have attached mouseover and mouseout event for "ProgramInfo" class using Jquery. What I want is, to change the border color of inside table containing class "tblProgram" on mousemove and mouseout.
My mousemove and mouseevent are:

$(document).ready(function()
{
    $(".ProgramInfo").mouseover(function()
     {
 // Code here?
     });
    $(".ProgramInfo").mouseout(function()
    { 
 // Code here?
    });
});

Also, I want to change the width and height of upper table through JQuery. When I tried this, I get width:auto.

Answer 1

$(this).find('.tblProgram').css({ borderColor:"cdd6e8" });

Answer 2

You can do it like this:

$(document).ready(function()
{
    $(".ProgramInfo").mouseover(function()
    {
        $(this).width($('#baseTable').width());
        $(".tblProgram", this).css("border", "solid black 1px");
     });
    $(".ProgramInfo").mouseout(function()
    { 
        $(this).width(100);
        $(".tblProgram", this).css("border", "solid red 1px");
    });
});

Answer 3

Look into the jQuery hover() method:

http://docs.jquery.com/Events/hover

It provides a cleaner abstraction for mouseover/-out

Answer 4

While the other answers cover changing the CSS properties on the fly, it's probably better practice to change classes. This avoids polluting your JS with styles, and helps you avoid having to hunt these down to change them later on for basic design updates.

$(document).ready(function() {
    $(".ProgramInfo").mouseover(function() {
        $(this).width($('#baseTable').width());
        $(".tblProgram", this).addClass('hover');
    });
    $(".ProgramInfo").mouseout(function() {
        $(this).width(100);
        $(".tblProgram", this).removeClass('hover');
    });
});

(I just modified Aexander Prokofyev's code for this, not sure about the width stuff...)

Answer 5

I wonder if it's a gridview or a data control, in that case the best way to accomplish, and if you want to abstract the hover function from the actual page where you place the control (imagine, for all pages that you use the control, you need to place that code in the page itself).

So, the best way is to use the DataItem event (or similiar to all data controls)

let's imagine that you have a GridView called myGrid.

ASP.NET Event

protected void myGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    { 
        // it's a row that contains data, so let's attach the mouse hover effects here to each row
        GridViewRow tr = e.Row;

        // a little of jQuery to add a class when the mouse is over the row, and to remove it once is out of the row
        tr.Attributes.Add("onmouseover", "$(this).addClass('gvSelectedDisabled');");
        tr.Attributes.Add("onmouseout", "$(this).removeClass('gvSelectedDisabled');");
    }
}

HTML

<asp:GridView ID="myGrid" runat="server" 
    onrowdatabound="myGrid_RowDataBound">
</asp:GridView>

P.S.

if you want, for example, show a green background for items that have in it's object data some flag and other color for others, please see my answer in this topic:

http://stackoverflow.com/questions/208038/selectively-apply-css-to-a-row-in-a-gridview/208067#208067