Question

<table>
<tbody>
<tr class = "row">
  <td class = "A"> </td>
  <td class = "A"> </td>
  <td class = "A B"> </td>
</tr>

<tr class = "row">
  <td class = "A B"> </td>
  <td class = "A B"> </td>
  <td class = "A B"> </td>
</tr>
</tbody>
</table>

如果所有子项td包含类B，如何隐藏最后一行。

我有一个动态生成行的日历，我想要隐藏不属于当前月份的单元格（由类“B”表示）。如果所有孩子都满足这个条件，我想隐藏整行。

目前我有

  tbody {
    tr:last-child {
      display: none;
    }
  }

但这不会起作用，因为有时最后一行是部分填充的，我不想隐藏它。

不确定纯CSS选择器是否可行。

Answer 1

CSS代表级联样式表，因此无法为父节点设置样式。但即将推出的CSS4可能带有以下解决方案：has（）伪类，因此您的代码可能如下所示：

$scope.savesGraphUserDetail.splice(index, 1);
//                                        ^

如果第一个＆lt; td＆gt;在最后＆lt; tr＆gt;有B级，那么整行不会显示。

这是未来，现在你可以使用JS或服务器端解决方案。

Answer 2

由于我使用React，我试图避免使用Javascript来操作dom元素。我发现了一种使用CSS

的方法

tbody {
    tr:last-child {
      td:first-child.B {
        display:none;
      }
      td:first-child.B ~ td  {
          display:none;
      }
    }
  }

首先，我选择最后一行tr:last-child和
td:first-child.B在最后一行中，不会显示包含B课程的第一个孩子
td:first-child.B ~ td在同一最后一行中，第一个包含B类的子节点的兄弟姐妹也不会显示

Answer 3

你可以用javascript

来做

＆＃13;

let rows = document.querySelectorAll('.row');
rows.forEach((row) => {
  let cols = row.querySelectorAll('td');
  let colsB = row.querySelectorAll('td.B');

  if (cols.length == colsB.length) {
    row.style = "display: none;";
  }
})

＆＃13;

  


    <table>
    <tbody>
    <tr class = "row row1">
      <td class = "A">a </td>
      <td class = "A">a </td>
      <td class = "A B">b </td>
    </tr>

    <tr class = "row row2">
      <td class = "A B">b </td>
      <td class = "A B">b </td>
      <td class = "A B">b </td>
    </tr>
    </tbody>
    </table>

＆＃13;

它会检查td的总数是否等于B类td的总数，然后再隐藏该行。

使用CSS有条件地隐藏最后一行

3 个答案: