顯示/隱藏基於嵌套 class 的表格行

Question

我在頁面上有一個按鈕，我只想顯示其中包含某個 class （在我的示例中target-class ）的行。 如果再次按下該按鈕，則會顯示所有行。

我不確定如何檢查target-class是否在<tr class="show-hide-this-one">

<button id="btn-toggle_target" type="button">Show Targets Only</button>
<table>
    <tbody>
    {% for item in first_list %}
        <tr class="show-hide-this-one">
            <td> {{ item.title }} </td>
            <td> 
                <table><tbody>
                {% for subitem in item.sublist %}
                    <tr>
                        <td>
                            {{ subitem.value }}
                            {% if value == 0 %}
                                <span class="target-class"> Looking for this one </span>
                            {% endif %}
                        </td>
                    </tr>
                 {% endfor %}
                 </tbody></table>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<script type="text/javascript">

    function toggleTarget() {       
        $btnToggle = $("#btn-toggle_target")
        var showTargetOnly = $btnToggle.hasClass("target-only")
        if (showTargetOnly) {
            $btnToggle.html("Show Targets Only").removeClass("target-only");
            $().show();
        }
        else {
            $btnToggle.html("Show All Records").addClass("target-only");
            $().hide();
        }
    }

    (function () {
        $("#btn-toggle_target").on('click', function() {
            toggleTarget();
        });
    }());

</script>

Answer 1

這並不容易，因為您沒有 class 或 id 但有一個小循環就可以了：

 $("#btn-toggle_target").on('click', function() { toggleTarget(); }); function toggleTarget() { var showTargetOnly = $("#btn-toggle_target").hasClass("target-only"); if (showTargetOnly) { $("#btn-toggle_target").html("Show Targets Only").removeClass("target-only"); $(".show-hide-this-one table tr").show(); } else { $("#btn-toggle_target").html("Show All Records").addClass("target-only"); $(".show-hide-this-one table td").each(function(){ if($(this).find(".target-class").length == 0) $(this).closest("tr").hide(); }) //this loop coul be replaced by //$(".show-hide-this-one table td:not(:has(.target-class))").closest("tr").hide(); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn-toggle_target" type="button">Show Targets Only</button> <table> <tbody> <tr class="show-hide-this-one"> <td> Item 1 </td> <td> <table><tbody> <tr> <td> 0 <span class="target-class"> Looking for this one </span> </td> </tr> <tr> <td> 1 </td> </tr> <tr> <td> 3 </td> </tr> </tbody></table> </td> </tr> <tr class="show-hide-this-one"> <td> Item 2 </td> <td> <table><tbody> <tr> <td> 4 </td> </tr> </tbody></table> </td> </tr> </tbody> </table>

我想，你可以替換這個循環：

      $(".show-hide-this-one table td").each(function(){
        if($(this).find(".target-class").length == 0) $(this).closest("tr").hide();
      })

經過

     $(".show-hide-this-one table td:not(:has(.target-class))").closest("tr").hide();