jqgrid : how to change the class of one cell (when mouse is over on) ?

Question

Hi,

I set cells of the first column of my grid, with a class as follow:

$("#myGrid").jqGrid('setCell',rowid,'column_1', '', '**ui-state-default**');

How to change the class of a cell when the mouse is over on it ?

Thanks you so much !

Answer 1

How about this?

$("#myGrid").hover(function(){
        $(this).find("td:first").css("background-color", "black");
    });

EDIT

 $("#myGrid tr").hover(
              function(){
              $(this).find("td:first").addClass('ui-state-hover');
              },
              function(){
              $(this).find("td:first").removeClass('ui-state-hover');
              }   
            );

OR

$("#myGrid tr").mouseenter(function(){
      $(this).find("td:first").addClass('ui-state-hover');
    }).mouseleave(function(){
      $(this).find("td:first").removeClass('ui-state-hover');
    });

Answer 2

... i solved it with something like that :

$("#myGrid tr").hover(function() { 
    $(this).find("td").eq(1).addClass('ui-state-hover');
});

$("#myGrid tr").mouseout(function() {
    $(this).find("td").eq(1).removeClass('ui-state-hover')
});

What do you think about ?

Answer 3

Here is my last solution. I will use it as follow :

$("#mygrid tr").hover(
  function(){
      $(this).find("td").eq(1).removeClass('ui-state-default');
      $(this).addClass("ui-state-hover");
  },
  function(){
     if(!$(this).hasClass("ui-state-active"))
     $(this).find("td").eq(1).addClass('ui-state-default');
  }
);

$("#mygrid tr").click(function(){
  $("#mygrid tr").each(function() {
    $(this).find("td").eq(1).addClass('ui-state-default');
  });

  $(".ui-state-active").removeClass("ui-state-active");
  $(".ui-state-highlight").removeClass("ui-state-highlight");
  $(this).find("td").eq(1).removeClass('ui-state-default');
  $(this).addClass("ui-state-active");

});

It works well also for a grid within input text tags !