使用 JQuery 更改表格边框颜色答案

【问题标题】：Change table border color using JQuery使用 JQuery 更改表格边框颜色
【发布时间】：2009-02-13 07:11:00
【问题描述】：

我有一个包含 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>

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

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

另外，我想通过JQuery改变上表的宽度和高度。当我尝试这个时，我得到了 width:auto。

【问题讨论】：

标签： asp.net jquery

【解决方案1】：

查看 jQuery hover() 方法：

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

它为 mouseover/-out 提供了更简洁的抽象

【讨论】：

hover 是一个很好的建议，但您应该扩展您的答案以涵盖 OPs 问题中关于不影响具有相同类名的其他表的部分。

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以这样做：

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

【讨论】：

我想根据另一个表格的宽度来设置宽度和高度。另一个表格宽度即将自动出现。你能把它点亮吗？ :)
我认为这段代码应该有所帮助：$(this).width($('#baseTable').width());

【解决方案4】：

虽然其他答案包括动态更改 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');
    });
});

（我刚刚为此修改了 Aexander Prokofyev 的代码，不确定宽度的东西......）

【讨论】：

【解决方案5】：

我想知道它是 gridview 还是 数据控件，在这种情况下是完成的最佳方式，如果您想从实际页面中抽象悬停功能您放置控件的位置（想象一下，对于您使用该控件的所有页面，您需要将该代码放置在页面本身中）。

所以，最好的方法是使用 DataItem 事件（或类似于所有数据控件）

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

ASP.NET 事件

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>

附言

例如，如果您想为对象数据中包含一些标志和其他颜色的项目显示绿色背景，请参阅我在本主题中的回答：

Selectively apply css to a row in a gridview

【讨论】：