Показать элемент под строкой в ​​таблице при нажатии

Question

У меня есть таблица, отображающая некоторую информацию. Чего я хотел бы добиться, так это позволить пользователю щелкнуть строку и отобразить примечание, относящееся к информации в этой строке, под этой строкой.

Я пытаюсь настроить его так, чтобы я мог использовать изящную функцию перехода 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>

Answer 1

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», чтобы получить эффект слайда.Кроме того, я действительно думаю, что вы должны немного прочитать о JQuery, чтобы полностью понять решение.Вы поймете, что на самом деле это довольно легко понять, как только вы освоите основы.