Tengo, por ejemplo, tres botones de opción como este:
◉ 0-30 ◉ 30-90 ◉ 90-100y mesa:
| identificación | nombre | età |
|---|---|---|
| 1 | personal | 0-30 |
| 2 | dany | 30-90 |
| 3 | elle | 90-100 |
JSFiddle: https://jsfiddle.net/Carla102030/28r7oxwf/5/
Mi objetivo es: cuando los usuarios marcaron el primer botón de opción, en la tabla deben ver solo las filas con este valor y así sucesivamente. Entonces quiero una función JS que funcione de esta manera.
¿Puedes ayudarme por favor?
Puede usar la función de filtro jQuery para detectar el valor.
$(document).ready(function(){ $('input[name="filter"]').change(function(){ var value = $(this).val().toLowerCase(); if (value === "all"){ $("#myTable tr").show(); } else { $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); } }); }); .table{ width: 100%; border: 1px solid #ddd; } .table tr, .table th, .table td{ border: 1px solid #ddd; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="radioCont"> <input type="radio" name="filter" value="0-30" id="i1" /> <label for="i1"> 0-30</label> <br /> <input type="radio" name="filter" value="30-90" id="i2" /> <label for="i2"> 30-90</label> <br /> <input type="radio" name="filter" value="90-100" id="i3" /> <label for="i3"> 90-100</label> <br /> <input type="radio" name="filter" value="all" id="i4" checked /> <label for="i4"> All</label> <br /> </div> <table class="table"> <thead> <tr> <th>id</th> <th>name</th> <th>età</th> </tr> </thead> <tbody id="myTable"> <tr> <td>1</td> <td>Sta</td> <td>0-30</td> </tr> <tr> <td>2</td> <td>Danny</td> <td>30-90</td> </tr> <tr> <td>3</td> <td>Elle</td> <td>90-100</td> </tr> </tbody> </table>