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

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:

Tag omission in text/html: Neither [the opening or closing] tag is omissible

<子> 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>