How to highlight ajax loaded table rows?_问答_开发者

How to highlight ajax loaded table rows?

开发者 https://www.devze.com 2023-03-08 04:46 出处：网络

I\'m creating a web page that search users in the database. When I\'m typing a username in the search box, it perfectly loads results using Ajax in a table (this table is in another PHP file). But I n

I'm creating a web page that search users in the database. When I'm typing a username in the search box, it perfectly loads results using Ajax in a table (this table is in another PHP file). But I need to select those rows when I press arrow keys or with mouse over (like Google search engine), when we are pointing to that row, it highlights. I tried with onmouseover function but no luck, but in normal PHP web pages onmouseover works. Here's what I normally used to select rows in a table.

I'll give you a very basic example, that how I use this.

<html>
  <head>
    <script type="text/javascript">
      function f1(x){
        document.getElementById(x).style.backgroundColor="#FF0000";<br/>        
      }
      function f2(x){
        document.getElementById(x).style.backgroundColor="#FFFFFF";     
      }
    </script>
  </head
  <body>
    <?php
    echo "<table border开发者_如何转开发='1'>";
    echo "<tr id='tr1' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'> <td>Elephant</td></tr>";
    echo "<tr id='tr2' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'><td>Snake</td></tr>";
    echo "<tr id='tr3' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'><td>Spider</td></tr>";
    echo "</table>";
    ?>
  </body>
</html>

My problem is, this does not work in an Ajax loaded table. Please help me...

The mouseover event doesn't work, because you register the event before inserting the HTML.

The way around it, is by attaching an event handler to the body tag, and then looking at the original source of the element, which is basically what the jquery live method does. That would look like this:

$(".hoverme").live("mouseover mouseout", function(event) {
  if ( event.type == "mouseover" ) {
      $(this).addClass('selected');
  } else {
      $(this).removeClass('selected');
  }
});

I'll see if I find the time to edit this answer for the keyboard control stuff too.