如何在css的帮助下从表中删除tr

Question

我正尝试仅使用CSS隐藏表格的当前行（选择值）。

当选择选项high时，我希望删除所有非high级的行。

table,
td {
  border-collapse: collapse;
}

table {
  overflow: hidden;
}

td {
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

tr:nth-child(2n + 1) {
  background-color: #299dff;
}

tr:hover {
  background-color: red;
}

option[value="high"]:checked :not(tr[data-level="high"]) {
  display: none;
}

option[value="medium"]:checked :not(td[data-level="medium"]) {
  display: none;
}

<div class="controls">
  <label for="level">level</label>
  <select name="level" id="level">
    <option value="high">high</option>
    <option value="medium">medium</option>
    <option value="low">low</option>
  </select>
  <label for="daytime">daytime</label>
  <select name="daytime" id="daytime">
    <option value="first">first</option>
    <option value="second">second</option>
  </select>
  <label for="speciality">speciality</label>
  <select name="speciality" id="speciality">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</div>
<table>
  <thead>
    <tr>
      <th>speciality</th>
      <th>name</th>
      <th>level</th>
      <th>number</th>
      <th>daytime</th>
    </tr>
  </thead>
  <tbody>
    <tr data-level="high" data-daytime="first" data-speciality="1">
      <td>стоматолог</td>
      <td>комірка 1:2</td>
      <td>комірка 1:3</td>
      <td>комірка 1:4</td>
      <td>комірка 1:5</td>
    </tr>
    <tr data-level="medium" data-daytime="second" data-speciality="2">
      <td>комірка 2:1</td>
      <td>комірка 2:2</td>
      <td>комірка 2:3</td>
      <td>комірка 2:4</td>
      <td>комірка 2:5</td>
    </tr>
    <tr data-level="low" data-daytime="second" data-speciality="3">
      <td>комірка 3:1</td>
      <td>комірка 3:2</td>
      <td>комірка 3:3</td>
      <td>комірка 3:4</td>
      <td>комірка 3:5</td>
    </tr>
    <tr data-level="medium" data-daytime="first" data-speciality="4">
      <td>комірка 4:1</td>
      <td>комірка 4:2</td>
      <td>комірка 4:3</td>
      <td>комірка 4:4</td>
      <td>комірка 4:5</td>
    </tr>
    <tr data-level="high" data-daytime="second" data-speciality="4">
      <td>комірка 5:1</td>
      <td>комірка 5:2</td>
      <td>комірка 5:3</td>
      <td>комірка 5:4</td>
      <td>комірка 5:5</td>
    </tr>
    <tr data-level="low" data-daytime="first" data-speciality="1">
      <td>комірка 6:1</td>
      <td>комірка 6:2</td>
      <td>комірка 6:3</td>
      <td>комірка 6:4</td>
      <td>комірка 6:5</td>
    </tr>
  </tbody>

</table>

我在jsfiddle上的代码。

Answer 1

visibility: collapse

为每个visibility: collapse设置<tr>，它们会缩小。 在演示中：

• 一个隐藏的单选按钮组位于.controls

的顶部

• select#level被details#level取代，因为<label>在<option>

内部不起作用

• <label>中的每个#level通过[for]属性与单选按钮相关联，当单击时，关联的隐藏单选按钮为:checked或不是

• 在:checked时，它将触发一种新样式，该样式会影响<tr>的特定.class

 #H:checked~table>tbody>tr.H,
 #M:checked~table>tbody>tr.M,
 #L:checked~table>tbody>tr.L {
   visibility: collapse;
 }

上面的规则集声明：

  

”如果#H，#M或#L是:checked ...
    ...然后是<table>之后的任何同级~ ...
    ...有一个<tbody> ...
    ...而<tbody>具有任何tr.H，tr.M或tr.L ...
    ...在适当的visibility: collapse;“

上设置<tr>

---

演示

form {
  width: 100%
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}

th {
  width: 20%;
}

td {
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

tr:nth-child(2n + 1) {
  background-color: #299dff;
}

tr:hover {
  background-color: red;
}

.controls {
  position: relative;
  max-height: 40px;
  overflow-y: visible;
}

.daytime {
  margin-left: 15vw;
}

.rad {
  display: none
}

#H:checked~.controls>#level>.H,
#M:checked~.controls>#level>.M,
#L:checked+.controls>#level>.L {
  background: red;
  color: white;
}

tr {
  visibility: visible;
}

.rad:checked~table>tbody>tr {
  visibility: collapse;
}

#A:checked~table>tbody>tr,
#H:checked~table>tbody>tr.H,
#M:checked~table>tbody>tr.M,
#L:checked~table>tbody>tr.L {
  visibility: visible;
}

details {
  outline: 1px solid #000;
  padding: 0;
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 13px;
  z-index: 1;
}

summary {
  font-size: normal;
  padding: 0 5px;
}

details label {
  display: block;
  cursor: pointer;
  border-bottom: 1px solid grey;
  background: #fff;
}

<form id='main'>
  <input id='A' class='rad' name='rad' type='radio'>
  <input id='H' class='rad' name='rad' type='radio'>
  <input id='M' class='rad' name='rad' type='radio'>
  <input id='L' class='rad' name='rad' type='radio'>
  <fieldset class="controls">
    <details name="level" id="level">
      <summary>Level</summary>
      <label for='A' class='A'>All</label>
      <label for='H' class='H'>High</label>
      <label for='M' class='M'>Mid</label>
      <label for='L' class='L'>Low</label>
    </details>
    <label for="daytime" class='daytime'>daytime</label>
    <select name="daytime" id="daytime">
      <option value="first">first</option>
      <option value="second">second</option>
    </select>
    <label for="speciality">speciality</label>
    <select name="speciality" id="speciality">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </fieldset>
  <table>
    <thead>
      <tr>
        <th>speciality</th>
        <th>name</th>
        <th>level</th>
        <th>number</th>
        <th>daytime</th>
      </tr>
    </thead>
    <tbody>
      <tr class='H' data-level="high" data-daytime="first" data-speciality="1">
        <td>стоматолог</td>
        <td>комірка 1:2</td>
        <td>комірка 1:3</td>
        <td>комірка 1:4</td>
        <td>комірка 1:5</td>
      </tr>
      <tr class='M' data-level="mid" data-daytime="second" data-speciality="2">
        <td>комірка 2:1</td>
        <td>комірка 2:2</td>
        <td>комірка 2:3</td>
        <td>комірка 2:4</td>
        <td>комірка 2:5</td>
      </tr>
      <tr class='L' data-level="low" data-daytime="second" data-speciality="3">
        <td>комірка 3:1</td>
        <td>комірка 3:2</td>
        <td>комірка 3:3</td>
        <td>комірка 3:4</td>
        <td>комірка 3:5</td>
      </tr>
      <tr class='H' data-level="high" data-daytime="second" data-speciality="4">
        <td>комірка 5:1</td>
        <td>комірка 5:2</td>
        <td>комірка 5:3</td>
        <td>комірка 5:4</td>
        <td>комірка 5:5</td>
      </tr>
      <tr class='M' data-level="mid" data-daytime="first" data-speciality="4">
        <td>комірка 4:1</td>
        <td>комірка 4:2</td>
        <td>комірка 4:3</td>
        <td>комірка 4:4</td>
        <td>комірка 4:5</td>
      </tr>
      <tr class='L' data-level="low" data-daytime="first" data-speciality="1">
        <td>комірка 6:1</td>
        <td>комірка 6:2</td>
        <td>комірка 6:3</td>
        <td>комірка 6:4</td>
        <td>комірка 6:5</td>
      </tr>
    </tbody>

  </table>
</form>

Answer 2

• 使用CSS选择器并使之更加具体时，您只能访问先前选择的兄弟姐妹或孩子。这意味着，如果选择器以option[value="high"]开头，那么您可以通过在该选择器的右侧添加内容来选择的是option元素，它们位于同一<select>标记内。 / p>

• "value"属性说明选项的值是什么，而不是所选值。 无法在CSS中读取select的选定值。正如注释中 soulshined 所述，您需要使用:checked选择当前选择的option。