使用JQuery更改表格边框颜色

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

我有一个用于控制HTML的用户控件,如下所示:

<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:

由于它是用户控件,它们可以是具有相同类“ProgramInfo”和“tblProgram”的多个表。现在我使用Jquery为“ProgramInfo”类附加了mouseover和mouseout事件。我想要的是,在mousemove和mouseout上更改包含类“tblProgram”的内部表的边框颜色。我的mousemove和mouseevent是:

$(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.

另外,我想通过JQuery更改上表的宽度和高度。当我尝试这个时,我得到宽度:自动。

5 个解决方案

#1

Look into the jQuery hover() method:

查看jQuery hover()方法:

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

It provides a cleaner abstraction for mouseover/-out

它为mouseover / -out提供了更清晰的抽象

#2

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

#3

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");
    });
});

#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.

虽然其他答案涵盖了动态更改CSS属性,但更改类可能更好。这样可以避免使用样式污染JS,并帮助您避免在以后更改它们以进行基本设计更新。

$(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...)

(我刚刚修改了Aexander Prokofyev的代码,不确定宽度的东西......)

#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).

我想知道它是一个gridview还是一个数据控件,在这种情况下是最好的完成方式,如果你想从你放置控件的实际页面中抽象出悬停函数(想象一下,对于你使用控件的所有页面,你需要将该代码放在页面本身)。

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

因此,最好的方法是使用DataItem事件(或类似于所有数据控件)

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

让我们假设您有一个名为myGrid的GridView。

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:

例如,如果您想要显示其中包含对象数据的项目的绿色背景,其他标记和其他颜色,请参阅本主题中的答案:

Selectively apply css to a row in a gridview

有选择地将css应用于gridview中的一行

#1