我如何制作这样的基于Jquery / css的表?

时间:2011-01-04 08:26:45

标签: jquery css

alt text

我希望它能够在我滚动行的同时淡入淡出动画。该行应与内容面板看起来像一样,就好像合并了内容面板和行一样。希望你们明白。

1 个答案:

答案 0 :(得分:1)

我认为这主要是你想要的

CSS:将页面拆分为两部分,一个表格和一个细节部分(或内容面板,就像你所说的那样)

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