Table Click

After clicking a row you can see all cell's values of this row.

by XcsN

HTML

<div id="dialog" class="window"></div>
<div id="mask"></div>
<table class='list' id="dyntable" border="1">
    <thead>
        <tr>
            <th>Code</th>
            <th>Anime</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Nickname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>Code Geass</td>
            <td>Lelouch Lemperouge</td>
            <td>(000) 123-456</td>
            <td>LL</td>
        </tr>
        <tr>
            <td>456</td>
            <td>Steins;Gate</td>
            <td>Makise Kurisu</td>
            <td>(000) 123-456</td>
            <td>MK</td>
        </tr>
    </tbody>
</table>

CSS

.list {
    border: 3px blue solid;
}
#mask {
    position:absolute;
    z-index:9000;
    background-color:#000;
    display:none;
    opacity: 0.5;
}
.window {
    position:fixed;
    background:aqua;
    width:350px;
    height:100px;
    display:none;
    z-index:9999;
    padding:20px;
}

.list tbody tr:hover {
    background-color:aqua;
}

JavaScript

$(document).ready(function () {
    var tbody = $("#dyntable tbody")[0];
    tbody.onclick = function (e) {
        var data = [];
        var target = e.srcElement || e.target;
        if ($(target).is(':last-child')) return;
        if (target && target.nodeName !== "TR") target = target.parentNode;
        else return;
        var cells = $(target).children("td");
        for (var i = 0; i < cells.length; i++)
        data.push(cells[i].innerHTML);



        $mylink = $('<a href="#" class="close">Kapat</a>');
        $mylink.css({
            position: 'absolute',
            top: 90,
            left: 330
        });

        $('#dialog').html(data);
        $('#dialog').append($mylink);

        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        $('#mask').css({
            'width': maskWidth,
                'height': maskHeight
        });

        $('#mask').fadeIn(1500);

        $('#dialog').css('top', 0);
        $('#dialog').css('left', maskWidth / 2 - $('#dialog').width() / 2);
        var y = maskHeight / 2 - $('#dialog').height() / 2;
        $('#dialog').show();
        $('#dialog').animate({
            'top': y
        }, 1500);
    };

    $(document).on('click', '.close', function () {
        $('#mask, .window').hide();
    });

    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });
});