Скрыть строку из таблицы с помощью класса td - PullRequest
Новая
       7

Скрыть строку из таблицы с помощью класса td

0 голосов
/ 25 мая 2018

Я динамически создаю HTML-таблицу с php-кодом.Если данные не обновляются (проверкой даты и времени), я получаю класс .offline td для созданной таблицы.

Я хочу, чтобы только лучшие 5 результатов были отсортированы по наибольшему из 30 температур, например,Я использую 

table.sortable tbody tr:nth-child(n + 6) {
            visibility: hidden;
            }

. Для этого.

Но если в топ-5 результатов есть данные за 2 часа, я хочу спрятать их и отобразить следующий.

Я пытаюсь с: 

.offline  {
            display: none;
            }

Но я просто удаляю строку, и у меня есть, например, 4 результата

Это полный стиль таблицы: 

<html>
                <head>
                    <meta charset="UTF-8">

                    <script src="https://cretaweather.gr/protected/sorttabletemp.js" type="text/javascript"></script>
                    <link href="../assets/css/templatetable2.css?v=1.1" type="text/css" rel="stylesheet" >
                    <script>
    window.onload = function() {
        (document.getElementsByTagName( "th" )[1]).click();
    };
</script>
<style>table.sortable tbody tr:nth-child(2n) td {
            background: #c2cdd6;
            }
        table.sortable tbody tr:nth-child(2n+1) td {
            background: #ccfffff;
            }
        table.sortable tbody tr:nth-child(n + 6) {
            visibility: hidden;
            }
        table.sortable tbody td:nth-child(n + 3) {
            display: none;
            }
        .offline  {
            display: none;
            }
</style>


                </head>
                <body>

                <table align="center" id="template" border="1" bordercolordark="#333333" bordercolorlight="#333333" width="300" cellpadding="0" cellspacing="0" style="border-collapse: collapse; text-align:center;" class="sortable">

                <thead>
                        <tr height="31" bgcolor="#c9e5f2">
                            <th class="sorttable_nosort" width="150" valign="top" align="center">Περιοχή</th>
                            <th class="sorttable_numeric" valign="top" align="center">Θερμοκρασία</th>
                        </tr>

                </thead>
                <tbody>

Это часть созданного html: 

</tr><tr class="odd-line">
                    <td class="offline"><a href="http://..." target="_blank" style="text-decoration:underline;color:#004774;">Μάλια</a></td>
                    <td class="offline">22.3&degC at 8:57</td>
                    <td class="offline">29/04/18</td>
                    <td class="offline">9:01</td>
            </tr><tr class="even-line">
                    <td class=""><a href="http://..." target="_blank" style="text-decoration:underline;color:#004774;">Μεσοχωριό</a></td>
                    <td class="">25.8&degC at 14:10</td>
                    <td class="">25/05/18</td>
                    <td class="">18:33</td>
            </tr><tr class="odd-line">
                    <td class="offline"><a href="http://..." target="_blank" style="text-decoration:underline;color:#004774;">Μεταξοχώρι</a></td>
                    <td class="offline">32.3&degC at 13:43</td>
                    <td class="offline">23/05/18</td>
                    <td class="offline">14:00</td>
            </tr><tr class="even-line">
                    <td class=""><a href="..." target="_blank" style="text-decoration:underline;color:#004774;">Μοχός</a></td>
                    <td class="">22.2&degC at 16:01</td>
                    <td class="">25/05/18</td>
                    <td class="">18:34</td>
            </tr><tr class="odd-line">
                    <td class=""><a href="..." target="_blank" style="text-decoration:underline;color:#004774;">Πετροκεφάλι</a></td>
                    <td class="">29.4&degC at 13:26</td>
                    <td class="">25/05/18</td>
                    <td class="">18:30</td>
            </tr><tr class="even-line">
                    <td class=""><a href="..." target="_blank" style="text-decoration:underline;color:#004774;">Πεζά</a></td>
                    <td class="">24.1&degC at 13:26</td>
                    <td class="">25/05/18</td>
                    <td class="">18:30</td>
            </tr><tr class="odd-line">
                    <td class=""><a href="..." target="_blank" style="text-decoration:underline;color:#004774;">Προφήτης Ηλίας</a></td>
                    <td class="">25.5&degC at 15:16</td>
                    <td class="">25/05/18</td>
                    <td class="">18:34</td>

Что я должен сделать, чтобы добиться этого.visibility: hidden просто дает пустое пространство.

Вот как это отображается сейчас: Я хочу скрыть устаревшую красную линию и вместо нее отобразить шестую строку, чтобы top5 обновлял данные

...