Изменить цвет границы таблицы с помощью JQuery

Question

У меня есть пользовательский элемент управления, содержащий 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". Теперь я прикрепил события mouseover и mouseout для класса ProgramInfo, используя Jquery. Я хочу, чтобы изменил цвет границы внутренней таблицы, содержащей класс "tblProgram", при перемещении мыши и при мышином
Мой ход мыши и событие мыши:

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

Также, Я хочу изменить ширину и высоту верхнего стола с помощью JQuery . Когда я попробовал это, я получил ширину: auto.

Answer 1

Посмотрите на метод jQuery hover ():

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

Обеспечивает более чистую абстракцию для наведения мыши / -out

Answer 2

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

Answer 3

Интересно, является ли это gridview или data control , в таком случае лучший способ добиться этого, и если вы хотите абстрагировать функцию наведения от фактической страницы, где поместите элемент управления (представьте, для всех страниц, которые вы используете элемент управления, вам нужно поместить этот код в саму страницу).

Итак, лучший способ - использовать событие DataItem (или аналогично всем элементам управления данными)

давайте представим, что у вас есть GridView с именем myGrid.

Событие 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>

приписка

если вы хотите, например, показать зеленый фон для элементов, которые имеют в своих данных объекта какой-либо флаг и другой цвет для других, см. Мой ответ в этой теме:

Выборочное применение CSS к строке в виде сетки

Answer 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');
    });
});

(я только что изменил код Александра Прокофьева для этого, не уверен насчет ширины ...)

Answer 5

Вы можете сделать это так:

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