如何從表中洗掉除第一個單元格值包含特定字串的行之外的所有行？-有解無憂

//Code that I have tried but it doesnt work:
$('#historyOfStatus table td').not(':contains("Revisions Required – CM")').parents("tr").remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="historyOfStatus">
  <table>
    <tbody>
      <tr>
        <th>Value</th>
        <th>Date Time</th>
        <th>By</th>
      </tr>
      <tr>
        <td class="Data1">Draft</td>
        <td class="Data1">2022-11-14 13:34:31</td>
        <td class="Data1">Muhammad Akhtar</td>
      </tr>
      <tr>
        <td class="Data1">Revisions Required – CM</td>
        <td class="Data1">2022-11-14 13:40:18</td>
        <td class="Data1">a</td>
      </tr>
      <tr>
        <td class="Data2">Under CFF Contracts Manager Review</td>
        <td class="Data2">2022-11-14 13:41:38</td>
        <td class="Data2">aa</td>
      </tr>
      <tr>
        <td class="Data1">Under CFF Compliance Review</td>
        <td class="Data1">2022-11-14 13:41:43</td>
        <td class="Data1">aaaa</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:41:48</td>
        <td class="Data2">bb</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:43:10</td>
        <td class="Data2">cc</td>
      </tr>
    </tbody>
  </table>
</div>

uj5u.com熱心網友回復：

它也可以用這個單行來完成：

$("#historyOfStatus table tr:nth-child(n 2)").filter(function(){return $("td:first",this).text()!="Revisions Required – CM";}).remove()

<div id="historyOfStatus">
  <table>
    <tbody>
      <tr>
        <th>Value</th>
        <th>Date Time</th>
        <th>By</th>
      </tr>
      <tr>
        <td class="Data1">Draft</td>
        <td class="Data1">2022-11-14 13:34:31</td>
        <td class="Data1">Muhammad Akhtar</td>
      </tr>
      <tr>
        <td class="Data1">Revisions Required – CM</td>
        <td class="Data1">2022-11-14 13:40:18</td>
        <td class="Data1">a</td>
      </tr>
      <tr>
        <td class="Data2">Under CFF Contracts Manager Review</td>
        <td class="Data2">2022-11-14 13:41:38</td>
        <td class="Data2">aa</td>
      </tr>
      <tr>
        <td class="Data1">Under CFF Compliance Review</td>
        <td class="Data1">2022-11-14 13:41:43</td>
        <td class="Data1">aaaa</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:41:48</td>
        <td class="Data2">bb</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:43:10</td>
        <td class="Data2">cc</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

這是一個快速的日終方法。

遍歷所有第一個單元格，檢查字串，并用臨時類標記其父行。
洗掉除第一（標題）行之外的所有未標記的行。
洗掉臨時類。

當然，您可以通過將元素收集到陣列或其他任何東西中來避免向 DOM 添加類。這很快。

$('#historyOfStatus td:first-child:contains("Revisions Required – CM")')
  .closest("tr")
  .addClass('keeper');

$('#historyOfStatus tr').not('.keeper').not(':first-child').remove();
$('#historyOfStatus tr').removeClass('keeper');

<div id="historyOfStatus">
  <table>
    <tbody>
      <tr>
        <th>Value</th>
        <th>Date Time</th>
        <th>By</th>
      </tr>
      <tr>
        <td class="Data1">Draft</td>
        <td class="Data1">2022-11-14 13:34:31</td>
        <td class="Data1">Muhammad Akhtar</td>
      </tr>
      <tr>
        <td class="Data1">Revisions Required – CM</td>
        <td class="Data1">2022-11-14 13:40:18</td>
        <td class="Data1">a</td>
      </tr>
      <tr>
        <td class="Data2">Under CFF Contracts Manager Review</td>
        <td class="Data2">2022-11-14 13:41:38</td>
        <td class="Data2">aa</td>
      </tr>
      <tr>
        <td class="Data1">Under CFF Compliance Review</td>
        <td class="Data1">2022-11-14 13:41:43</td>
        <td class="Data1">aaaa</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:41:48</td>
        <td class="Data2">bb</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:43:10</td>
        <td class="Data2">cc</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

這是一個保留標題行的丑陋在線。我更喜歡上面那個的可讀性。您可以通過將標題行正確地放在一個thead元素中來簡化。

$('#historyOfStatus tr:not(:first-child) td:first-child:not(:contains("Revisions Required – CM"))')
  .closest("tr").remove();

<div id="historyOfStatus">
  <table>
    <tbody>
      <tr>
        <th>Value</th>
        <th>Date Time</th>
        <th>By</th>
      </tr>
      <tr>
        <td class="Data1">Draft</td>
        <td class="Data1">2022-11-14 13:34:31</td>
        <td class="Data1">Muhammad Akhtar</td>
      </tr>
      <tr>
        <td class="Data1">Revisions Required – CM</td>
        <td class="Data1">2022-11-14 13:40:18</td>
        <td class="Data1">a</td>
      </tr>
      <tr>
        <td class="Data2">Under CFF Contracts Manager Review</td>
        <td class="Data2">2022-11-14 13:41:38</td>
        <td class="Data2">aa</td>
      </tr>
      <tr>
        <td class="Data1">Under CFF Compliance Review</td>
        <td class="Data1">2022-11-14 13:41:43</td>
        <td class="Data1">aaaa</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:41:48</td>
        <td class="Data2">bb</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:43:10</td>
        <td class="Data2">cc</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534761.html

標籤：网页格式查询

上一篇：只想在`data`引數有值時添加，如果沒有則不要在JQuery的引數字串中添加資料

下一篇：隱藏每個多個可滾動div的元素