Question

在我的index.html页面中，我有一个定义如下的emtpy表：

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

如上所述，我们附带了一个javascript文件 my.js 。

my.js （用于更新表格行）：

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>");
}

我成功地使动态表工作，但是当我尝试在每一行上添加鼠标悬停效果时，我只是失败了。我尝试的是使用CSS：

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

我希望鼠标悬停时可以使用颜色高亮效果来处理IE 7 +，firefox和chrome，在我的情况下实现表行鼠标悬停效果的正确方法是什么？

---- ---- EDIT

这是我的index.html页面：

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

- 解----

@manji的解决方案解决了我的问题。 JavaScript中的变化是在for循环中使用append而不是after。然后，突出显示行的CSS方式正在运行。

Answer 1

您正在<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>并关闭它，然后在<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>");

Answer 2

尝试以下方法：

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

鉴于您的浏览器支持列表，CSS是正确的解决方案。重要的是要注意单元格（<td>）覆盖行（<tr>）。所以这是他们想要修改的背景。

Answer 3

你最好的选择是使用jquery的悬停：Click Here

IE 7没有对锚标签以外的元素进行悬停支持。（或者可能只有6个），无论哪种方式，因为你已经使用了jquery，你可以轻松完成你的悬停效果。

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

注意：如果您在HTML 4.01 STRICT中运行doctype，IE 7将仅允许：悬停。否则你需要使用javascript来完成你想要做的事情。

Answer 4

如果无法使用css解决方案，请使用delegate函数来处理动态行。

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

Answer 5

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/

Answer 6

使用jquery委托方法，从性能的角度来看，这是最好的方法。

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

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

            });

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

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

            });

在我的情况下，如何在鼠标悬停时突出显示表格行？

6 个答案: