admin管理员组文章数量:1314514
In my index.html page, I have an empty table defined as following:
<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 an JavaScript file my.js is included.
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> </td>");
mytable.after(" <td>"+obj.name+"</td>");
mytable.after("<td>"+obj.phone+"</td>");
mytable.after("</tr>");
}
I successfully get the dynamical table working, but when I try to add mouse hover effect on each row, I just failed. What I tried is by using CSS:
.mytable tr:hover
{
background-color: #632a2a;
color: #fff;
}
I would like the mouse hover with color highlight effect to be working on IE 7+, firefox and chrome, what is the correct way to implement the table row mouse hover effect in my case??
----EDIT----
Here is my index.html page:
index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src=".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>
--SOLUTION----
@manji 's solution solved my problem. That's change in JavaScript to use append instead of after inside for loop. Then, the CSS way of highlighting row is working.
In my index.html page, I have an empty table defined as following:
<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 an JavaScript file my.js is included.
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> </td>");
mytable.after(" <td>"+obj.name+"</td>");
mytable.after("<td>"+obj.phone+"</td>");
mytable.after("</tr>");
}
I successfully get the dynamical table working, but when I try to add mouse hover effect on each row, I just failed. What I tried is by using CSS:
.mytable tr:hover
{
background-color: #632a2a;
color: #fff;
}
I would like the mouse hover with color highlight effect to be working on IE 7+, firefox and chrome, what is the correct way to implement the table row mouse hover effect in my case??
----EDIT----
Here is my index.html page:
index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://getfirebug./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>
--SOLUTION----
@manji 's solution solved my problem. That's change in JavaScript to use append instead of after inside for loop. Then, the CSS way of highlighting row is working.
-
tr:hovershould work. Can you provide a jsfiddle example to show what's going wrong? – Spudley Commented Jun 3, 2011 at 14:26 -
1
hover on css is technically suppose to be used for the
atag hence why it might not work cross browser. – Val Commented Jun 3, 2011 at 14:27 -
tr:hoverdefinetly work. Your generated html is incorrect. Look at my answer for more explanation. – manji Commented Jun 3, 2011 at 14:38 - @manji, you just point at the exact place where the whole thing get stuck. Thank you. – Leem Commented Jun 3, 2011 at 14:59
6 Answers
Reset to default 3You are writing the <td> outside of <tr> with this:
mytable.after("<tr>");
mytable.after("<td> </td>");
mytable.after(" <td>"+obj.name+"</td>");
mytable.after("<td>"+obj.phone+"</td>");
mytable.after("</tr>");
For example, first one will add a <tr> and close it, then 3 closed <td>s before the <tr> and the last one is incorrect and will have no effect.
Try it this way and it will work:
mytable.after("<tr>"
+"<td> </td>"
+"<td>"+obj.name+"</td>"
+"<td>"+obj.phone+"</td>"
+"</tr>");
and it's better to use .append() (it will add the objects in their list order):
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> </td>"
+"<td>"+obj.name+"</td>"
+"<td>"+obj.phone+"</td>"
+"</tr>");
Try the following:
.mytable tr:hover td
{
background-color: #632a2a;
color: #fff;
}
Given your list of browser support, CSS is the proper solution. It's important to note that the cells (<td>) cover the row (<tr>). So it's their background that you want to modify.
You're best bet is to use jquery's hover: Click Here
IE 7 did not have hover support on elements other than anchor tags. (or maybe that was just 6) either way, since you are using jquery already you can get your hover effect done easily.
$("tr").hover(
function () {
$(this).addClass('hover_class');
},
function () {
$(this).removeClass('hover_class');
}
);
Note: IE 7 will only allow :hover if you are running in HTML 4.01 STRICT for your doctype. Otherwise you need to use javascript to acplish what you are looking to do.
If you cannot get the css solution to work use a delegate function to handle the dynamic rows.
$("table.mytable").delegate("tr", "hover", function(){
$(this).toggleClass("hover");
});
jQuery:
$('.mytable tr').hover(function() {
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
});
CSS:
.mytable tr.active td
{
background-color: #632a2a;
color: #fff;
}
Check out the working example: http://jsfiddle/JpJFC/
Use jquery delegate method which is the best way to do it from performance point of view.
$(".mytable").delegate("tr", "mouseover", function(e) {
$(this).addClass('mouseoverClass');
});
$(".mytable").delegate("tr", "mouseout", function(e) {
$(this).removeClass('mouseoverClass');
});
本文标签： javascriptIn my caseHow to highlight table row when mouseoverStack Overflow
版权声明：本文标题：javascript - In my case, How to highlight table row when mouseover? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741967653a2407644.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论