css - 单击时在表中的行下方显示元素

我有一张桌子，显示一些信息。我要完成的是允许用户单击一行，并在该行下方显示与该行中的信息相关的注释。

我正在尝试对其进行设置，以便可以使用漂亮的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>

最佳答案

第一次下载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”以实现幻灯片效果。另外，我真的认为您应该对JQuery有所了解，以完全理解该解决方案。一旦掌握了基础知识，您就会发现它实际上很容易理解。

关于css - 单击时在表中的行下方显示元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4390853/