How would i make a Jquery / css based table like this?
I want it to fade animate in and out as i roll over the rows. The row should look like one with the content panel, as though the content panel and开发者_JS百科 row are merged. Hope you guys understand.
I think this does principally what you want
CSS: Split the page into two parts, a table and a detail part (or content panel, as you call it)
#tableView
{
float: left;
width: 50%;
}
#detailsView
{
float: left;
width: 50%;
}
Javascript:
$(document).ready(function(){
$("#tableView tr").mouseenter(function() {
var detail = $(this).html(); // or whatever you want to show in content pane
$("#detailsView").html(detail).fadeIn("slow");
}).mouseout(function() {
$("#detailsView").fadeOut("slow");
});
});
HTML:
</html>
<body>
<div id="tableView">
<table>
Your table goes here …
</table>
</div>
<div id="detailsView">
…
</div>
</body>
</html>
加载中,请稍侯......
精彩评论