时间戳

首页 > 解决方案 > 移除所有 tr 元素，除非 tr>td>input 有一个类 'DontRemoveMe'

css - 移除所有 tr 元素，除非 tr>td>input 有一个类 'DontRemoveMe'

问题描述

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

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

标签： css

解决方案

操作 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>

推荐阅读