Question

这个问题让我很生气，我尝试了一些使用jquery和CSS的方法，但老实说没有什么好处，基本上我有这个下表：

<table id="mainTable">
  <thead>
    <tr>
      <th>Arrival Hours</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>19:30<span></td>
      <td>Mike</td>
    </tr>
    <tr>
      <td><span>20:00<span></td>
      <td>eric</td>
    </tr>
    <tr>
      <td><span>20:30<span></td>
      <td>jonas</td>
    </tr>
  </tbody>
</table>

我需要隐藏偶数跨度，这里是20:00，上面的表是一个例子，我正在使用的表是由数据动态制作的，所以我想这个作品可能是如下所示：

.scale-draft:nth-child(2n){
    display: none !important;
}

但它没有用，也试过这个脚本：

    $(document).ready(function () {
        $('#mainTable tbody tr td:nth-child(2n)').css('visibility','hidden');
    });

又一次失败，我此刻有点困惑，你能帮助我吗？

Answer 1

我建议：

tr:nth-child(even) td span {
  display: none;
}

<table id="mainTable">
  <thead>
    <tr>
      <th>Arrival Hours</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>19:30</span>
      </td>
      <td>Mike</td>
    </tr>
    <tr>
      <td><span>20:00</span>
      </td>
      <td>eric</td>
    </tr>
    <tr>
      <td><span>20:30</span>
      </td>
      <td>jonas</td>
    </tr>
  </tbody>
</table>

您的jQuery选择器未检索您似乎要收集的元素的原因是：

#mainTable tbody tr td:nth-child(2n)

:nth-child()根据其父级中的位置选择一个元素，而不是选择祖先<table>或<tbody>元素的位置。

我建议的方法会选择<tr>元素中的偶数<tbody>行，然后在<span>个<td>元素中找到<tr>个元素的样式元件。

顺便提一下，您发布的HTML有一些错误 - 在此回答中已更正 - 您的<span>元素均未关闭。在这种情况下，这不会影响问题，但它仍然无效HTML：

在text / html中标记省略： [打开或关闭]标签都不可省略

<子> https://www.w3.org/TR/html5/text-level-semantics.html#the-span-element

无效HTML的问题在于，在构建通常特定于实现的DOM时，浏览器会尝试“拯救”它，使其有效，因此每个浏览器可能会以不同方式更正DOM，从而导致跨浏览器问题使用JavaScript和CSS。

此外，值得注意的是，如果您希望仅在第一个单元格中隐藏<span>元素，则上述解决方案将隐藏偶数行中的所有 <span>元素，您可能希望将选择器修改为：

tr:nth-child(even) td:first-child span {
  display: none;
}

tr:nth-child(even) td:first-child span {
  display: none;
}

<table id="mainTable">
  <thead>
    <tr>
      <th>Arrival Hours</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>19:30</span>
      </td>
      <td>Mike</td>
    </tr>
    <tr>
      <td><span>20:00</span>
      </td>
      <td>eric</td>
    </tr>
    <tr>
      <td><span>20:30</span>
      </td>
      <td>jonas</td>
    </tr>
  </tbody>
</table>

Answer 2

您不需要为此编写JS，我注意到您的HTML中未关闭span标记并使用以下代码：

HTML：

<table id="mainTable">
  <thead>
    <tr>
      <th>Arrival Hours</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td><span>19:30</span></td>
      <td>Mike</td>
    </tr>
    <tr>
    <td><span>20:00</span></td>
      <td>eric</td>
    </tr>
    <tr>
    <td><span>20:30</span></td>
      <td>jonas</td>
    </tr>
  </tbody>
</table>

CSS：

#mainTable tr td:nth-child(2n){
    display: none !important;
}

演示： https://jsfiddle.net/zrnvozhk/

每个偶数td清除表格中单元格的文本

2 个答案: