如何突出显示ajax加载的表格行？

发布于 2024-11-09 06:02:36 字数 1124 浏览 0 评论 0原文

我正在创建一个在数据库中搜索用户的网页。当我在搜索框中输入用户名时，它会使用 Ajax 完美地将结果加载到表中（该表位于另一个 PHP 文件中）。但是当我按下箭头键或将鼠标悬停在上面（如谷歌搜索引擎）时，我需要选择这些行，当我们指向该行时，它会突出显示。我尝试使用 onmouseover 函数但没有成功，但在正常的 PHP 网页中 onmouseover 可以工作。这是我通常用来选择表中的行的方法。

我会给你一个非常基本的例子，说明我如何使用它。

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

我的问题是，这在 Ajax 加载的表中不起作用。请帮我...

原文

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...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

停顿的约定 2024-11-16 06:02:36

mouseover 事件不起作用，因为您在插入 HTML 之前注册了该事件。

解决方法是将事件处理程序附加到 body 标记，然后查看元素的原始源，这基本上就是 jquery live 方法所做的事情。看起来像这样：

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

我会看看是否有时间来编辑键盘控制内容的答案。

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.

回复收藏 0 原文

~没有更多了~