Javascript - 根据复选框显示特定的表格行

Question

我想根据复选框选择显示表格行，我只需要显示特定行。我是 JavaScript 的菜鸟，我从 How to show table rows based on checkbox selected 获取了这个 sn-p

我尝试根据要求修改代码，但无法确定从数据库中检索到的代码

在 JS 脚本中它与 td 值匹配，但我没有明确提及表值，所有它来自 db。

           <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="AMERICA" placeholder="Select Country" id="id_country_0">
         AMERICA</label>
        
        </li>
            <li><label for="id_country_3"><input type="checkbox" name="country" value="newyork" placeholder="Select Country" id="id_country_3">
         newyork</label>
        </li>

        <li><label for="id_country_2"><input type="checkbox" name="country" value="china" 
        placeholder="Select Country" id="id_country_2">china</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 has a good example of filtering based on inputs 这可能有助于您走上正轨。

下面我提供了一个工作示例，使用 W3 代码作为起点。这应该让您了解如何实施所需的解决方案。

在您提供的代码中，您可能正在使用 jQuery。下面的解决方案是纯 JS，不需要任何外部库。除了修改 JS 过滤功能（filter_type），我们将 onclick 属性从包含所有复选框的 div 中移出，并将其放置在每个单独的复选框输入中。

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