Aeroport Table

Aeroport Table.markdown

Aeroport Table

A Pen by Alexander on CodePen.

License.

index.html

<div id="info">
    <p>
        Информация о рейсе:
        <a href="#" onclick=" $('#info').css('display', 'none');" style="position: absolute; right: 20px;">
            Закрыть
        </a>
    <p id="info_text"></p>
    </p>
</div>
<div id="checks">
    <label><input id="check_to" type="checkbox" checked="checked">Вылет</label>
    <label><input id="check_from" type="checkbox" checked="checked">Прилет</label>
</div>
<table>
    <thead>
        <tr>
            <th>тип рейса</th>
            <th>время вылета/прилёта</th>
            <th>аэропорт назначения</th>
            <th>номер рейса</th>
            <th>статус рейса</th>
            <th>авиакомпания (логотип)</th>
            <th>тип воздушного судна</th>
            <th>примечание</th>
        </tr>
    </thead>
    <thead id="header_nav">
        <tr>
            <th>тип рейса</th>
            <th>время вылета/прилёта</th>
            <th>аэропорт назначения</th>
            <th>номер рейса</th>
            <th>статус рейса</th>
            <th>авиакомпания (логотип)</th>
            <th>тип воздушного судна</th>
            <th>примечание</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td class="checkFrom"></td>
        <td>19:45</td>
        <td>Майами</td>
        <td>UN-666</td>
        <td>Трансаэро</td>
        <td>Идет регистрация...</td>
        <td>Boeing-777</td>
        <td/>
    </tr>

    <tr>
        <td class="checkTo"></td>
        <td>17:45</td>
        <td>Пулково</td>
        <td>UN-666</td>
        <td>Трансаэро</td>
        <td>Идет регистрация...</td>
        <td>Boeing-777</td>
        <td/>
    </tr>

    <tr>
        <td class="checkTo"></td>
        <td>17:45</td>
        <td>Пулково</td>
        <td>UN-666</td>
        <td>Трансаэро</td>
        <td>Идет регистрация...</td>
        <td>Boeing-777</td>
        <td/>
    </tr>

    <tr>
        <td class="checkTo"></td>
        <td>17:45</td>
        <td>Пулково</td>
        <td>UN-666</td>
        <td>Трансаэро</td>
        <td>Идет регистрация...</td>
        <td>Boeing-777</td>
        <td/>
    </tr>
    <tr>
        <td class="checkTo"></td>
        <td>17:45</td>
        <td>Пулково</td>
        <td>UN-666</td>
        <td>Трансаэро</td>
        <td>Идет регистрация...</td>
        <td>Boeing-777</td>
        <td/>
    </tr>

    <tr>
        <td class="checkTo"></td>
        <td>17:45</td>
        <td>Пулково</td>
        <td>UN-666</td>
        <td>Трансаэро</td>
        <td>Идет регистрация...</td>
        <td>Boeing-777</td>
        <td/>
    </tr>

    <tr>
        <td class="checkFrom"></td>
        <td>17:45</td>
        <td>Пулково</td>
        <td>UN-666</td>
        <td>Трансаэро</td>
        <td>Идет регистрация...</td>
        <td>Boeing-777</td>
        <td/>
    </tr>

    <tr>
        <td class="checkFrom"></td>
        <td>17:45</td>
        <td>Пулково</td>
        <td>UN-666</td>
        <td>Трансаэро</td>
        <td>Идет регистрация...</td>
        <td>Boeing-777</td>
        <td/>
    </tr>
    </tbody>
</table>

script.js

$(document).ready(function () {

            $('td').hover(function () {
                        var t = parseInt($(this).index()) + 1;
                        $('td:nth-child(' + t + ')').addClass('highlighted');
                    },
                    function () {
                        var t = parseInt($(this).index()) + 1;
                        $('td:nth-child(' + t + ')').removeClass('highlighted');
                    });

            $('tbody tr').click(function () {
                var infoText = '';
                $.each($(this)[0].cells, function( index, value ) {
                    infoText += '<span>' + $('th:nth-child(' + (index + 1) +')')[0].innerText + ': ' + value.innerHTML + '</span></br>';
                });
                $('#info_text')[0].innerHTML = infoText;
                $('#info').css("top", window.scrollY);
                $('#info').css("display", "block");
            });

            $('#check_to').click(function () {
                if ($(this).attr('checked')) {
                    $("td.checkTo").parent().show()
                } else {
                    $("td.checkTo").parent().hide()
                }
            });

            $('#check_from').click(function () {
                if ($(this).attr('checked')) {
                    $("td.checkFrom").parent().show()
                } else {
                    $("td.checkFrom").parent().hide()
                }
            });

            $(window).scroll(function () {
                /* 20 - отступ сверху */
                if ($(document).scrollTop() > 20 + 72) {
                    $('#header_nav').css("display", "block");
                } else {
                    $('#header_nav').css("display", "none");
                }
                $('#header_nav').stop().animate({
                    height: '116px'
                }, 600);
                //$('#info').css("top", window.scrollY);
            });
        })

scripts

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

style.css

body {
            font: 16px/1.5 Helvetica, Arial, sans-serif;
            background: url(http://orig11.deviantart.net/ad48/f/2012/198/1/4/above_the_clouds_by_bluesixtynine-d57jb7b.jpg);
        }

        table {
            margin: 20px auto;
            border-collapse: collapse;
            background-color: white;
            /*opacity: 0.9;*/
        }

        table th {
            padding:21px 25px 22px 25px;
            background-color: #03C9A9;
            border:whitesmoke 1px solid;
            /*opacity: 0.9;*/
        }
        table th:first-child{
            text-align: left;
            padding-left:20px;
        }
        table td:first-child{
            padding-right:10px;
        }
        table tr, table col {
            transition: all .3s;
            text-align: center;
            padding-left:20px;
        }
        table tr td {
            padding:18px;
        }
        td {
            cursor: pointer;
        }
        tr:nth-child(2n) {
            background-color: whitesmoke;
            /*opacity: 0.9;*/
        }
        tr:hover,.highlighted {
            background-color: rgba(232, 255, 177, 0.8);
            /*rgba(0, 140, 203, 0.4);*/
        }

        #header_nav {
            display: none;
            width:calc(100% - 16px);
            height:100px;
            position:fixed;
            top:0;
            left:8px;
        }

        #info {
            display: none;
            position: absolute;
            z-index: 1;
            background-color: floralwhite;
            width: 400px;
            left: 50%;
            padding-left: 20px;
            margin-left: -200px;
            margin-top:100px;
            border: gray 1px solid;
            border-radius:5px;
        }

        #checks {
            background-color: white;
            border: white 1px solid;
            width: 300px;
            padding: 20px;
        }
        label {
            margin-right: 20px;
            cursor: pointer;
            padding: 5px;
            border: gray 1px dashed;
        }
        .checkTo::after {
            content: 'Вылет';
        }
        .checkFrom::after {
            content: 'Прилет';
        }