tablita

dabblet.css

/* tablita */
* { padding:0; margin:0; border:0 }
html,body { height:100%;
	font:calc(100vw/40)/1.6 Avenir-Light,Segoe UI,Open Sans,sans-serif }
input { font-family:inherit; font-size:inherit; outline:1px solid; border-radius:3px;
	padding:0 .3em }
table { margin:auto }
td { padding:0 1em }
/* alinear numeros */
td:nth-child(1),td:nth-child(3),td:nth-child(6),#output { text-align:right }
tbody td:nth-child(1):before,tbody td:nth-child(6):before { content:'$'}
/* seleccion */
tbody tr { transition:all 250ms; display:none }
tbody tr.match { display:table-row }
[for=disponible] { display:block; padding:2em; width:13em; margin:1em auto;
	border:1px solid rgba(0,0,0,.1); border-radius:5px }
#disponible { width:3em }

dabblet.html

<label for=disponible> Disponible:
	$ <input id=disponible placeholder=123>
</label>

<table>
	<thead>
	<td> Cuota <td> Frecuencia <td> Pagos <td> Producto <td> Plazo <td> Total 
	<tbody id=planes>
	<tr><td> 92  <td> Semanal    <td> 156 <td> AF3A <td> 3 Años <td> 14,352
	<tr><td> 187 <td> Catorcenal <td> 130 <td> AF5A <td> 5 Años <td> 24,310 
	<tr><td> 245 <td> Catorcenal <td> 78  <td> TI3A <td> 3 Años <td> 19,110 
	<tr><td> 365 <td> Catorcenal <td> 78  <td> TF3A <td> 3 Años <td> 28,470 
	<tr><td> 403 <td> Catorcenal <td> 78  <td> RI3A <td> 3 Años <td> 31,434 
	<tr><td> 462 <td> Catorcenal <td> 104 <td> DI4A <td> 4 Años <td> 48,048 
	<tr><td> 609 <td> Catorcenal <td> 78  <td> RF3A <td> 3 Años <td> 47,502 
	<tr><td> 694 <td> Catorcenal <td> 104 <td> DF4A <td> 4 Años <td> 72,176 
</table>

dabblet.js

with(document.querySelector('input'))
	oninput = function(){
			var value = +this.value;
			Array.prototype.map.call(
				document.querySelectorAll('#planes td:first-child'), function(e){
						e.parentNode.className = '';
						return e; })	
				.filter(function(e, i){
					return e.innerText <= value || !i; })			
				.reverse()[0].parentNode.className = 'match';					
					this.value = this.value.replace(/[^\d,.]/,'');	
				},	
			onkeydown = function(e){		
				if (e.keyCode == 13)			
					this.placeholder = this.value,			
					this.value = ''; };

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}