¿Cómo filtrar una tabla con un dropdownlist?

publicado por: Anonymous

Quiero hacer una página con algo mas que HTML y CSS. Tengo esto:

y esto es mas o menos lo que tengo

He buscado por internet y no encontre nada que esté bien explicado o que me sirva realmente. Lo que yo quiero hacer es que al seleccionar una opción de mi <select> se muestren solo algunos objetos de mi tabla. Como ven, tengo un “ALL” que mostraria todos, pero tambien tengo otros individuales que mostrarían unos especificos.

Aca dejo parte del codigo.
Select:

<select>
            <option>ALL</option>
            <option>Scout</option>
            <option>Soldier</option>
            <option>Pyro</option>
            <option>Demoman</option>
            <option>Heavy</option>
            <option>Engineer</option>
            <option>Medic</option>
            <option>Sniper</option>
            <option>Spy</option>
        </select>

Tabla(reducida)

<table width="1000px"; style="margin: 0 auto;">
        <thead>
            <tr>
                <th>Icon</th>
                <th>Item</th>
                <th>Selling at</th>
                <th>Buying at</th>
                <th>Stock</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td><img src="#"/></td>
                <td>Beastly Bonnet</td>
                <td>1.33 refined</td>
                <td>1 refined</td>
                <td>33/100</td>
            </tr>

            <tr>
              <td><img src="#"/></td>
              <td>Big Elfin Deal</td>
              <td>2 keys + 4.22 refined</td>
              <td>1 key + 15.11 refined</td>
              <td>33/100</td>
            </tr>


        </tbody>
    </table>

solución

Aquí tienes un ejemplo basándome en tu código y utilizando jQuery.
Como puedes ver a cada opción en el select le asigno como valor la categoría (Scout, Soldier, …).

A cada fila le asigno un class con dicha categoría. En concreto le he asignado a una fila Scout y a otra Soldier.

En el evento change del select se recupera el valor seleccionado y se muestran las filas cuya clase coincide con el valor y se ocultan el resto.

Si selecciona All, se muestran todas:

_x000D_

_x000D_

$(function(){_x000D_
	var $tabla = $('#tabla');_x000D_
	_x000D_
	$('#selectCategory').change(function(){_x000D_
		var value = $(this).val();_x000D_
		if (value){_x000D_
			$('tbody tr.' + value, $tabla).show();_x000D_
			$('tbody tr:not(.' + value + ')', $tabla).hide();_x000D_
		}_x000D_
		else{_x000D_
			// Se ha seleccionado All_x000D_
			$('tbody tr', $tabla).show();_x000D_
		}_x000D_
	});_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div>_x000D_
<span>Class:</span> _x000D_
<select id="selectCategory">_x000D_
            <option value="">ALL</option>_x000D_
            <option value="Scout">Scout</option>_x000D_
            <option value="Soldier">Soldier</option>_x000D_
            <option value="Pyro">Pyro</option>_x000D_
            <option value="Demoman">Demoman</option>_x000D_
            <option value="Heavy">Heavy</option>_x000D_
            <option value="Engineer">Engineer</option>_x000D_
            <option value="Medic">Medic</option>_x000D_
            <option value="Sniper">Sniper</option>_x000D_
            <option value="Spy">Spy</option>_x000D_
        </select>_x000D_
</div>_x000D_
_x000D_
<table id="tabla" style=" width: 1000px; margin: 0 auto;">_x000D_
        <thead>_x000D_
            <tr>_x000D_
                <th>Icon</th>_x000D_
                <th>Item</th>_x000D_
                <th>Selling at</th>_x000D_
                <th>Buying at</th>_x000D_
                <th>Stock</th>_x000D_
            </tr>_x000D_
        </thead>_x000D_
_x000D_
        <tbody>_x000D_
            <tr class="Scout">_x000D_
                <td><img src="#"/></td>_x000D_
                <td>Beastly Bonnet</td>_x000D_
                <td>1.33 refined</td>_x000D_
                <td>1 refined</td>_x000D_
                <td>33/100</td>_x000D_
            </tr>_x000D_
_x000D_
            <tr class="Soldier">_x000D_
              <td><img src="#"/></td>_x000D_
              <td>Big Elfin Deal</td>_x000D_
              <td>2 keys + 4.22 refined</td>_x000D_
              <td>1 key + 15.11 refined</td>_x000D_
              <td>33/100</td>_x000D_
            </tr>_x000D_
        </tbody>_x000D_
    </table>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *