时间戳

首页 > 解决方案 > 使用 td 类隐藏表格中的一行

html - 使用 td 类隐藏表格中的一行

问题描述

我正在使用 php 代码动态创建一个 html 表。如果数据没有更新（通过日期时间检查），我会在创建的表上获得一个 .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>

我该怎么做才能做到这一点。可见性：隐藏只是给出一个空的空间。

这就是它现在的显示方式： 我想隐藏过时的红线并改为显示第六行，以更新 top5 数据

标签： htmlhide

解决方案

推荐阅读