Anzeige Artikel unten Zeile in der Tabelle auf Klick

Question

habe ich eine Tabelle einige Informationen angezeigt werden. Was ich möchte, ist zu tun, damit der Benutzer auf einer Zeile klicken, und hat das zum Eintrag im Zusammenhang Note in dieser Zeile Anzeige unterhalb dieser Zeile.

Ich versuche, es so einzurichten, dass ich die raffinierte CSS Übergang Funktion verwenden kann, so dass nur die Notiz in einer versteckten, absolut positionierte Reihe setze unter der Infozeile ist nicht in Frage. CSS Übergang wirkt nicht auf dem position Stil.

Ich habe es so eingerichtet, dass die Notiz in einem div sein wird. Wenn der Benutzer eine Zeile in der Tabelle klickt, ruft ein onClick Ereignis eine Javascript-Funktion auf, die die div sichtbar macht. Alles was ich jetzt Notwendigkeit, dass die div ist unter der ausgewählten Tabellenzeile in eine Reihe aufstellen.

Wie kann ich die Höhe der Tabellenzeile und Position? Ich denke, ich könnte das verwenden, um die div zu positionieren. Oder gibt es einen besseren Weg, dies zu tun?

Hier ist ein Beispiel dafür, was ich habe:

<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. Download JQuery . Dann tun Sie etwas wie unten:

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

Hinweis: Ersetzen Sie "fadeToggle" mit "slideToggle" einem Dia-Effekt acheive. Auch ich glaube wirklich, sollen Sie ein bisschen auf JQuery lesen bis zu der Lösung vollständig zu verstehen. Sie werden feststellen, dass es eigentlich ganz einfach zu verstehen ist, wenn Sie die Grundlagen erhalten.