Question

我用动态创建一个带有PHP代码的html表。如果数据没有更新（通过日期 - 时间检查），我会在创建的表上获得.offline td类。

我希望只有前30个结果按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>

我该怎样做才能实现。可见性：隐藏只是给了一个空间。

现在显示的方式如下： i want to hide the red line thats outdated and display the sixth line instead, to have top5 updated data

使用td类隐藏表中的一行

0 个答案: