Javascript - 根據復選框顯示特定的表格行

Question

我想根據我只需要顯示特定行的復選框選擇來顯示表格行。 我是 JavaScript 新手，從如何根據選中的復選框顯示表格行中獲取了此代碼段

我試圖根據要求修改代碼，但我無法弄清楚。

           <div>Country</div>
            <div class="row" name="country_checkbox" id="id_row"  onclick="return filter_type(this);">
             <ul id="id_country">
            <li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0">
         NORTHAMERICA</label>
        
        </li>
            <li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3">
         LATAM</label>
        </li>

        <li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" 
        placeholder="Select Country" id="id_country_2">ASIA</label>
        </li>
        
         </ul>
                    </div>
            <table class="datatable" id='table_id'> 
              <thead>
                <thead>
                  <tr>
                    <th>Region</th>
                    <th> Area </th>
                    <th> Country </th>
                 </tr>
                </thead>
     
              <tbody>
                <tr id="trow">
                 {% for i in database%}
                  <td>i.Region</td>
                  <td>i.Area </td>
                  <td>i.Country</td>
                 </tr>
              </tbody>



    <script>
    // checkbox selection
    
         function filter_type(box) {
        //alert("checked");
         var cbs = document.getElementsByTagName('input');
         var all_checked_types = [];
         for(var i=0; i < cbs.length; i++) {
             if(cbs[i].type == "checkbox") {
                     if(cbs[i].name.match(/^country/)) {
                             if(cbs[i].checked) {
                                 all_checked_types.push(cbs[i].value);
                              }
                          }
                   }
          }
    
         if (all_checked_types.length > 0) {
             $('.dataclass tr:not(:has(th))').each(function (i, row) {
                 var $tds = $(this).find('td'),
                 type = $tds.eq(2).text();
                 if (type && all_checked_types.indexOf(type) >= 0) {
                     $(this).show();
                  }else{
                     $(this).hide();
                  }
              });
          }else {
                $('.datatbl tr:not(:has(th))').each(function (i, row) {
                    var $tds = $(this).find('td'),
                    type = $tds.eq(2).text();
                    $(this).show();
                 });
        }
        return true;
     }  
    
    </script>

Answer 1

您的方法可能需要一些工作。 W3 有一個很好的基於輸入的過濾示例，可以幫助您走上正確的軌道。

下面我提供了一個工作示例，使用 W3 代碼作為起點。 這應該讓您了解如何實施所需的解決方案。

在您提供的代碼中，您可能正在使用 jQuery。 下面的解決方案是純 JS，不需要任何外部庫。 除了修改 JS 過濾函數（ filter_type ）之外，我們還從包含所有復選框的 div 中移動了 onclick 屬性，並將其放置在每個單獨的復選框輸入上。

           <div>Country</div>
       <div class="row" name="country_checkbox" id="id_row">
         <ul id="id_country">
           <li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0" onclick="filter_type();">
               NORTHAMERICA</label>

           </li>
           <li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3" onclick="filter_type();">
               LATAM</label>
           </li>

           <li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" placeholder="Select Country" id="id_country_2" onclick="filter_type();">ASIA</label>
           </li>

         </ul>
       </div>
       <table class="datatable" id='table_id'>
         <thead>
           <thead>
             <tr>
               <th>Region</th>
               <th> Area </th>
               <th> Country </th>
             </tr>
           </thead>

         <tbody>
           <tr id="trow_1">
             <td>i.Region</td>
             <td>i.Area </td>
             <td>NORTHAMERICA</td>
           </tr>
           <tr id="trow_2">
             <td>i.Region</td>
             <td>i.Area </td>
             <td>LATAM</td>
           </tr>
           <tr id="trow_3">
             <td>i.Region</td>
             <td>i.Area </td>
             <td>ASIA</td>
           </tr>
         </tbody>



         <script>
           function filter_type() {
             //declare variables
             var inputs, input, filters, table, tr, td, i, r;
             //get all checkbox inputs
             inputs = document.querySelectorAll("input[type=checkbox]");
             table = document.getElementById("table_id");
             tr = table.getElementsByTagName("tr");
             //array to hold filters
             filters = [];

             //loop through inputs and add value for all checked to filters
             for (i = 0; i < inputs.length; i++) {
               input = inputs[i];
               if (input.checked) {
                 filters.push(input.value);
               }
             }

             //loop through each row in table
             for (r = 0; r < tr.length; r++) {
               //get column to compare to, in this case the 3rd column
               td = tr[r].getElementsByTagName("td")[2];
               if (td) {
                 //get value of the column
                 txtValue = td.textContent || td.innerText;
                 //check if column value is the filters array
                 //or if filters array is empty, show all rows
                 if (filters.indexOf(txtValue) > -1 || filters.length == 0) {
                   //true, show row
                   tr[r].style.display = "";
                 } else {
                   //false, hide row
                   tr[r].style.display = "none";
                 }
               }
             }

           }

         </script>