点击下方显示表格中的项目

我有一个表格显示一些信息。我想要完成的是允许用户单击一行，并将与该行中的信息相关的注释显示在该行的下方。点击下方显示表格中的项目

我想设置它以便我可以使用漂亮的CSS转换功能，因此只需将注释放置在信息行下面的隐藏绝对定位的行中即可。 CSS过渡不会对position风格起作用。

我已经把它设置好了，这样笔记就会在div。当用户点击表格中的一行时，onClick事件将调用一个Javascript函数，该函数使div可见。现在我需要的是div在选定的表格行下排列。

我怎么能得到表行的高度和位置？我想我可以用它来定位div。或者，有没有更好的方法来做到这一点？

这里是我的本钱的例子：

<style> 
    .emarNote{ 
       transition: all .3s linear; 
       -o-transition: all .3s linear; 
       -moz-transition: all .3s linear; 
       -webkit-transition: all .3s linear; 
      } 
</style> 

<script type="text/javascript"> 
    function showEmar(id) 
    { 
     if (document.getElementById("emarNote"+id).style.visibility == "hidden") 
     { 
      document.getElementById("emarNote"+id).style.visibility = 'visible'; 
      document.getElementById("emarNote"+id).style.opacity = 1; 
     } 
     else 
     { 
      document.getElementById("emarNote"+id).style.opacity = 0; 
      document.getElementById("emarNote"+id).style.visibility = 'hidden'; 
     } 
    } 
</script> 

<table> 
    <tr onClick="showEmar(1)"> 
     <td>Info</td> 
     <td>Info</td> 
    </tr> 
</table> 

<div id="emar1" class="emarNote" style="visibility:hidden; opacity:0; position:absolute;"> 
    note about info 
</div>

来源

2010-12-08 Jimmy

你可以在这个项目中使用jQuery吗？这可能是最简单的（但不一定是最好的）方式来实现你的目标。以一个跨浏览器的方式可靠地计算高度/宽度是一个不重要的任务而不是一个JS库来为你做。 – Ender 2010-12-08 18:32:46

jQuery会很好。我遗憾地还没有学到很多东西，所以任何新的曝光都会有帮助。 – Jimmy 2010-12-08 22:50:38

1日下载JQuery。然后做类似下面：

<style> 
    .emarNote{ background:#CCCCCC; }   
</style> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.emarNote').hide(); 
    $('tbody', '#myTable').click(function(event) { 
     tr_ID = $(event.target).parent().attr('id'); 
     $('#' + tr_ID + '-info').fadeToggle('slow'); 
    }); 
}); 
</script> 

<table id="myTable"> 
<tbody> 
    <tr id="row1"> 
     <td>Info</td> 
     <td>Info</td> 
    </tr> 
    <tr> 
    <td colspan="2" id="row1-info" class="emarNote">MORE INFO would be really cool and such</td> 
    </tr> 
    </tbody> 
</table>

注：将 “fadeToggle” 用 “的slideToggle” 到acheive滑动效果。另外，我真的认为你应该阅读一下JQuery来充分理解解决方案。一旦你掌握了基本知识，你会发现它实际上很容易理解。

来源

2010-12-09 02:07:22 LittleTreeX

点击下方显示表格中的项目

回答

相关问题