Geek asks and answers

In my case, How do I highlight a table row when hovering over the mouse?

in my index.html page, I have an emtpy table defined as follows:

<body>
  ...
  <table width="500" border="0" cellpadding="1" cellspacing="0" class="mytable">
      <tr></tr>
  </table>
  <script src="my.js"></script>
</body>

As you saw above, there is a file javascript my.js .

my.js (which is used to update the table row):

var items = ARRAY_OF_OBJECTS_FROM_SERVER; //e.g. items=[{'John', '023567'},{'Bill', '055534'},...];

//Each object element in the "items" array contain "name" and "phone" attribute.

var mytable = $('.mytable tr:first');
for(var i=0; i<items.length; i++){
   var obj = items[i];
   mytable.after("<tr>");
   mytable.after("<td>&nbsp;</td>");
   mytable.after(" <td>"+obj.name+"</td>");         
   mytable.after("<td>"+obj.phone+"</td>");
   mytable.after("</tr>");
}

I successfully run a dynamic table, but when I try to add a mouseover effect to each row, I just failed. I tried using CSS:

.mytable tr:hover
{ 
  background-color: #632a2a;
  color: #fff;
}

I would like the mouse to hover with the color highlight effect while working on IE 7+, firefox and chrome, what is the correct way to implement the mouseover effect in a table row in my case?

---- ---- EDIT

Here is my index.html page:

index.html

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>my test</title>
<link href="mystyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
 <body>
      <table width="500" border="0" cellpadding="1" cellspacing="0" class="mytable">
          <tr>
          </tr>
      </table>
  <script src="my.js"></script>
  </body>
</html>

- DECISION ----

@manji . JavaScript append after . CSS- .

+3
6

<td> <tr> :

mytable.after("<tr>");
mytable.after("<td>&nbsp;</td>");
mytable.after(" <td>"+obj.name+"</td>");         
mytable.after("<td>"+obj.phone+"</td>");
mytable.after("</tr>");

, <tr> , 3 <td>s <tr>, .

, :

mytable.after("<tr>"
+"<td>&nbsp;</td>"
+"<td>"+obj.name+"</td>"
+"<td>"+obj.phone+"</td>"
+"</tr>");

.append() ( ):

var mytable = $('.mytable');  // mytable selector is changed to select the table
                              // you can remove the empty <tr>
for(var i=0; i<items.length; i++){
   var obj = items[i];
   mytable.append("<tr>"
   +"<td>&nbsp;</td>"
   +"<td>"+obj.name+"</td>"
   +"<td>"+obj.phone+"</td>"
   +"</tr>");
+3

:

.mytable tr:hover td
{ 
  background-color: #632a2a;
  color: #fff;
}

, CSS . , (<td>) (<tr>). , .

+2

jquery hover:

IE 7 , . (, , 6) , jquery , .

$("tr").hover(
     function () {
        $(this).addClass('hover_class');
     }, 
     function () {
        $(this).removeClass('hover_class');
     }
);

. IE 7 : , HTML 4.01 STRICT doctype. javascript , .

+1

css- , delegate .

$("table.mytable").delegate("tr", "hover", function(){
    $(this).toggleClass("hover");
});
+1

JQuery

$('.mytable tr').hover(function() {
  $(this).addClass('active');
}, function() {
  $(this).removeClass('active');
});

CSS

.mytable tr.active td
{ 
  background-color: #632a2a;
  color: #fff;
}

: http://jsfiddle.net/JpJFC/

0

Use the jquery delegate method, which is the best way to do this in terms of performance.

$(".mytable").delegate("tr", "mouseover", function(e) {

                $(this).addClass('mouseoverClass');

            });

$(".mytable").delegate("tr", "mouseout", function(e) {

                $(this).removeClass('mouseoverClass');

            });
0
source

More articles:


All Articles