點擊下方顯示錶格中的項目

我有一個表格顯示一些信息。我想要完成的是允許用戶單擊一行，並將與該行中的信息相關的註釋顯示在該行的下方。點擊下方顯示錶格中的項目

我想設置它以便我可以使用漂亮的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

點擊下方顯示錶格中的項目

回答

相關問題