Question

很抱歉，标题非常具体，想不出更笼统的说法。

假定您有一个表，并且每行包含一个具有输入的单元格，但是某些输入字段具有“ DontRemoveMe”类。您如何定位除“ DontRemoveMe”行以外的每一行？

Answer 1

操作DOM元素需要JavaScript。实现此目的的一种方法是使用jQuery：

function remove() {
  $('tr:not(.dontRemoveMe)').remove();
}

.dontRemoveMe td {
  background-color: green;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr class="dontRemoveMe">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jon</td>
    <td>Jones</td>
    <td>33</td>
  </tr>
</table>

<button onclick="remove()">Remove rows</button>

Answer 2

CSS（尚未实现）：

我相信使用CSS level 4 selectors

tr:has(td>input:not(>>.DontRemoveMe))

但是，这些没有在任何浏览器中实现。因此，您可能想使用javascript。

Javascript：

// Select all rows that don't contain a input.DontRemoveMe
let rows = Array.from(document.querySelectorAll("tr")).filter(x => !(x.querySelector("input.DontRemoveMe")));

// Add a special class to these rows so we can target them with CSS
rows.forEach(x => x.classList.add("selected"));

td {
  padding: 8px; /* Padding for all rows to make background visible */
}
.selected {
  background: red;
}

<table>
  <tr>
    <td><input type="text" value="selected" />
    </td>
  </tr>
  <tr>
    <td><input class="DontRemoveMe" type="text" value="not selected" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="selected" />
    </td>
  </tr>
</table>

Answer 3

这是一种老式的javascript方法。

找到所有tr标记，然后找到任何类别为DontRemoveMe的子项，如果找不到任何子项，则将.hide类添加到当前行。

但是，老实说，我会问你为什么要这样做的原因，机会是有一种更明智的方法。

var tr = document.getElementsByTagName('tr');

var i = 0;
var length = tr.length
for (; i < length; i++) {
  var dontRemove = tr[i].getElementsByClassName('DontRemoveMe')
  if (!dontRemove.length) {
    tr[i].classList.add('hide')
  }
}

td {
  color: #ededed;
}

.red {
  background-color: #ff3030;
}

.blue {
  background-color: #6495ED;
}

.hide {
  display: none;
}

<table>
  <tr class="red">
    <td>Normal</td>
    <td>Normal</td>
    <td class="DontRemoveMe">Don't Remove Me</td>
  </tr>
  <tr class="blue">
    <td>Can't see me</td>
    <td>Can't see me</td>
    <td>Can't see me</td>
  </tr>
  <tr class="red">
    <td class="DontRemoveMe">Don't Remove Me</td>
    <td>Normal</td>
    <td class="DontRemoveMe">Don't Remove Me</td>
  </tr>
</table>

删除所有tr元素，除非tr> td> input具有类'DontRemoveMe'

3 个答案: