jQuery - Цветные таблицы, когда флажок установлен и удаляется, когда нет

Question

Я немного застреваю, не могу решить эту проблему. Я установил некоторый jQuery, который идентифицирует значения в радиовходах, которые выравниваются со значениями в таблице. Это начало делать некоторую фильтрацию на столе.

Я хочу, чтобы следующие три вещи происходят:

• Всякий раз, когда вы нажимаете на фильтре, и клетка имеет такое же значение, то строка подсвечивается
• Всякий раз, когда вы убедитесь, что параметр выключен, он получает удален
• Если страница загружается и вариант уже установлен, то строка подсвечивается при загрузке

JQuery Код:

$(function() { 
    // On Change of Radio Buttons 
    $('input').on('change', function() { 
     var filter = $('input:checkbox[name=filter]:checked').val(); 

     // Edit the Rows 
     $(".gameStatus").filter(function() { 
      return $(this).text() == filter; 
     }).parent('tr').addClass('filtered'); 
    }); 
}); 

jsfiddle: http://jsfiddle.net/darcyvoutt/8xgd51mg/

Answer 1

$(function() { 
    var filters = []; 
    var edit_rows = function() { 
     filters = []; 
     $('input:checkbox[name=filter]:checked').each(function() { 
      filters.push(this.value); 
     }); 

     // Edit the Rows 

     $(".gameStatus").each(function() { 
      $(this).parent('tr') 
       .toggleClass('filtered', 
       filters.indexOf($(this).text()) > -1 
      ); 
     }); 
    } 
    edit_rows(); 

    // On Change of Radio Buttons 
    $('input').on('change', edit_rows); 
}); 

jsfiddle

редактирования: добавлена ​​функциональность, так что вызывается на странице загрузки

Answer 2

попробовать это. :)

$(function() { 
    var highlight = function(el){ 
     if(el.is(':checked')){ 
      $(".gameStatus:contains("+el.val()+")") 
      .parent('tr').addClass('filtered'); 
     }else{ 
      $(".gameStatus:contains("+el.val()+")") 
      .parent('tr').removeClass('filtered'); 
     } 
    } 

    //On Load 
    highlight($('input[type="checkbox"][name=filter]:checked')); 

    // On Change of Radio Buttons 
    $('input').on('change', function() { 
     highlight($(this));  
    }); 
}); 

Answer 3

Вот альтернативное решение ...

$(function() { 
 
    function highlight() { 
 
     
 
     var filter = $(this).val(); 
 
     var checked = this.checked; 
 

 
     // Edit the Rows 
 
     var affectedRows = $(".gameStatus").filter(function() { 
 
      return $(this).text() == filter; 
 
     }); 
 
     
 
     if (checked) { 
 
      affectedRows.parent('tr').addClass('filtered'); 
 
     } else { 
 
      affectedRows.parent('tr').removeClass('filtered'); 
 
     } 
 
    } 
 
    
 
    $('input').each(highlight); 
 
    
 
    
 
    // On Change of Radio Buttons 
 
    $('input').on('change', highlight); 
 
});

.filtered { 
 
    background: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="filters"> 
 
     <input type="checkbox" name="filter" id="draft" value="Draft" checked /> 
 
     <label for="draft">Draft</label> 
 
     <input type="checkbox" name="filter" id="active" value="Active" /> 
 
     <label for="active">Active</label> 
 
     <input type="checkbox" name="filter" id="complete" value="Complete" /> 
 
     <label for="complete">Complete</label> 
 
     <input type="checkbox" name="filter" id="acrhived" value="Archived" /> 
 
     <label for="acrhived">Archived</label> 
 
    </div> 
 
    <table id="userManager"> 
 
     <tbody> 
 
      <tr> 
 
       <th>Game</th> 
 
       <th>Teams</th> 
 
       <th>Status</th> 
 
      </tr> 
 
      <tr> 
 
       <td>Another Game</td> 
 
       <td>New Team, Project Lucrum</td> 
 
       <td class="gameStatus">Active</td> 
 
      </tr> 
 
      <tr> 
 
       <td>New Game</td> 
 
       <td>No teams selected</td> 
 
       <td class="gameStatus">Draft</td> 
 
      </tr> 
 
      <tr> 
 
       <td>New Game</td> 
 
       <td>New Team, Just in Case</td> 
 
       <td class="gameStatus">Active</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    <div class="test"></div> 
 
</div>