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

Question

У меня есть пользовательский элемент управления, который conatins 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» на mousemove и mouseout.
Мой MouseMove и MouseEvent являются:

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

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

Answer 1

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

Answer 2

Вы можете сделать это следующим образом:

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

Посмотрите в парении JQuery() метод:

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

Это обеспечивает более чистую абстракцию при наведении курсора мыши/отъезда

Answer 4

В то время как другие ответы охватывают изменение свойств CSS на лету, это p разумно улучшить практику изменения классов. Это позволяет избежать загрязнения ваших стилей 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 Прокофьев для этого, не уверен насчет ширины материала ...)

Answer 5

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

Таким образом, лучший способ это использовать событие DataItem (или похоже на все контрольные данные)

давайте представим, что у вас есть GridView называется 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.

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

Selectively apply css to a row in a gridview