Строки таблицы фильтра на основе значения выбора

Question

Мне нужно отфильтровать строки таблицы на основе значения выбора. Когда выбранное значение равно «» (пусто), таблица должна быть скрыта. Если значение select равно 1, таблица должна быть видимой, и она должна отображать только строки, в которых значение столбца первой таблицы таблицы 1.

Проблема в том, что этот столбец идентификатора содержит несколько идентификаторов, таких как 1,2. Поскольку мой JQuery умение не лучшее, что я нужен, вы, ребята, чтобы помочь мне выполнить мой код

Мой селектор

<select id='mySelector'> 
    <option value="">Please Select</option> 
    <option value='1'>A</option> 
    <option value='2'>B</option> 
    <option value='3'>C</option> 
</select> 

Мой стол

<table id='myTable'> 
    <thead> 
     <tr> 
     <th>ids</th> 
     <th>name</th> 
     <th>address</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>1,2</td> 
     <td>Jhon</td> 
     <td>Doe</td> 
     </tr> 
     <tr> 
     <td>3</td> 
     <td>Mike</td> 
     <td>Poet</td> 
     </tr> 
     <tr> 
     <td>2,3</td> 
     <td>Ace</td> 
     <td>Ventura</td> 
     </tr> 
    </tbody> 
</table> 

Мой сценарий

$(document).ready(function($) { 
    $('table').hide(); 
    $('#mySelector').change(function(){ 
     $('table').show(); 
     var selection = $(this).val(); 
     var dataset = $('#myTable').find('tr'); 
      $.each(dataset, function(index, item) { 
      //help 
      }); 
    }); 
}); 

И здесь работает plunker

Если вам нужна дополнительная информация, сообщите мне, и я предоставлю. Заранее спасибо.

Answer 1

Вы можете фильтр строки на основе содержания td, который содержит ID S:

1. Ваш набора данных должен быть $('#myTable tbody').find('tr') так Täht это не показывает/скрыть thead

2. Сначала показать все столы tr s используя dataset.show()

3. Теперь отфильтровывать tr сек, что вам не нужно, чтобы показать, используя это:

   dataset.filter(function(index, item) { 
       return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1; 
   }).hide(); 
   

Смотреть демо ниже:

$(document).ready(function($) { 
 
    $('table').hide(); 
 
    $('#mySelector').change(function() { 
 
    $('table').show(); 
 
    var selection = $(this).val(); 
 
    var dataset = $('#myTable tbody').find('tr'); 
 
    // show all rows first 
 
    dataset.show(); 
 
    // filter the rows that should be hidden 
 
    dataset.filter(function(index, item) { 
 
     return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1; 
 
    }).hide(); 
 

 
    }); 
 
});

/* Styles go here */ 
 

 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
th, 
 
td { 
 
    padding: 8px; 
 
    text-align: left; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.styled-select.slate { 
 
    height: 34px; 
 
    width: 240px; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<script src="script.js"></script> 
 

 
<select id='mySelector' class="styled-select slate"> 
 
    <option value="">Please Select</option> 
 
    <option value='1'>A</option> 
 
    <option value='2'>B</option> 
 
    <option value='3'>C</option> 
 
</select> 
 
<br> 
 
<br> 
 
<br> 
 
<table id='myTable'> 
 
    <thead> 
 
    <tr> 
 
     <th>ids</th> 
 
     <th>name</th> 
 
     <th>address</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1,2</td> 
 
     <td>Jhon</td> 
 
     <td>Doe</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Mike</td> 
 
     <td>Poet</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2,3</td> 
 
     <td>Ace</td> 
 
     <td>Ventura</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

Попробуйте использовать ниже код

$("#mySelector").on("change", 
      function(){ 
       var a = $(this).find("option:selected").html(); 

       $("table tr td:first-child").each(
        function(){ 
         if($(this).html() != a){ 
          $(this).parent().hide(); 
         } 
         else{ 
          $(this).parent().show(); 
         } 
        }); 
      }); 

Answer 3

Вот решение, которое вы можете испытать here

$(function() { 
    $('table').hide(); 
    $('#mySelector').change(function(){ 
     $('table').show(); 
     var selection = $(this).val(); 
     var dataset = $('#myTable').find('tr'); 

     dataset.each(function(index) { 
     item = $(this); 
     item.hide(); 

     var firstTd = item.find('td:first-child'); 
     var text = firstTd.text(); 
     var ids = text.split(','); 

     for (var i = 0; i < ids.length; i++) 
     { 
      if (ids[i] == selection) 
      { 
      item.show(); 
      } 
     } 
     }); 
    }); 
}); 

Answer 4

Короткое решение с использованием :contains() селектор:

$(document).ready(function($) { 
    $('table').hide(); 

    $('#mySelector').change(function(){ 
     var selection = $(this).val(); 
     $('table')[selection? 'show' : 'hide'](); 

     if (selection) { // iterate only if `selection` is not empty 
     $.each($('#myTable tbody tr'), function(index, item) { 
      $(item)[$(item).is(':contains('+ selection +')')? 'show' : 'hide'](); 
     }); 
     } 

    }); 
}); 

Test ссылка: https://plnkr.co/edit/zNQNFVBIPSyPjEyU7I1J?p=preview

---

http://api.jquery.com/contains-selector/