Filter even / uneven numbers

Using filter() .match(regex) to filter

by Plippie Plop

HTML

<ul id="list">
    <li>120</li>
    <li>121</li>
    <li>122</li>
    <li>123</li>
    <li>124</li>
    <li>125</li>
    <li>126</li>
    <li>127</li>
    <li>128</li>
    <li>129</li>
    <li>130</li>
</ul>
<button class="filter" data-mode="even" data-target="#list" data-target-type="ul">Filter Even</button>

<table id="table">
    <thead>
        <tr><th>col 01</th><th>col 03</th></tr>
</thead>
<tbody>
    <tr>
       <td data-nr="128">blaat 1</td><td><button>X</button></td>
    </tr>
<tr>
       <td data-nr="127">blaat 2</td><td><button>X</button></td>
    </tr>
<tr>
       <td data-nr="126">blaat 3</td><td><button>X</button></td>
    </tr>
<tr>
       <td data-nr='125'>blaat 4</td><td><button>X</button></td>
    </tr>
<tr>
       <td data-nr="124">blaat 5</td><td><button>X</button></td>
    </tr>
<tr>
       <td data-nr="123">blaat 6</td><td><button>X</button></td>
    </tr>
    
</tbody>
</table>



<button class="filter" data-mode="even" data-target="#table" data-target-type="table">Filter Even</button>

CSS

table {width:100%;}
table tbody tr:nth-child(odd){ background:#efefef; }

JavaScript

list = $('#list');

$('.filter').on('click', function(){
    
 var mode= $(this).attr('data-mode');
 var type = $(this).attr('data-target-type');
 var $target = $(this).attr('data-target'); 
var regExeven = "\d*[02468]$"; // regular expresion for searching uneven numbers
var regExUneven = "\d*[13579]$"; // regular expresion for searching even numbers
    
  // determine if target is a string, if so, convert to $obj
    if($.type($target)==='string'){
	    $target = $($target);			
	} 
    
    console.log(type);
    console.log(mode);
    console.log($target);
    
    if(type==='ul'){        
        $target.find('li').show();    
        $target.find('li').filter( function(){
            var str= $(this).text()
            if(mode==='even'){
                return str.match(regExUneven) ;   
            }
            if(mode==='uneven'){
              return str.match(regExeven) ;    
            }
        }).hide();
    }
  
    if(type==='table'){        
        $target.find('> tbody > tr').show(); 
        var srow = $target.find('> tbody > tr');
        srow.find('> td').filter( function(){          
            var str= $(this).text();
            if(mode==='even'){            
                return str.match(regExUneven) ;   
            }
            if(mode==='uneven'){
              return str.match(regExeven) ;    
            }
        }).parent().hide();
    }
        
        
    if(mode==='even'){
        $(this).attr('data-mode','uneven').text('filter uneven');
    }
    if(mode=='uneven'){
       $(this).attr('data-mode','reset').text('filter reset');   
    }
     if(mode=='reset'){
       $(this).attr('data-mode','even').text('filter even');   
    }
    
});