Показать определенную строку таблицы на основе флажка

Я хочу отобразить строку таблицы на основе выбора из нескольких вариантов, когда я извлекаю данные из базы данных, там будет 1000+ строк, среди которых мне нужно отобразить только конкретную строку. Я ноб в JavaScript и взял этот сниппет из Как показать строки таблицы на основе выбранного флажка

Я попытался изменить код в соответствии с требованиями, но не смог разобраться. Я сократил часть td, чтобы уменьшить длину кода, там будет 16 столбцов вокруг. Пожалуйста, помогите мне, если любой другой JS скрипт будет предоставлен, это было бы очень полезно.

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

Вернуться на верх