0

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>
0

3 respuestas 3

1

El siguiente código permite filtrar los resultados en base a un <select>, puede darte una base.

$("#searchInput").change(function () {
if(this.value != "all")
  {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
if (this.value == "") {
    jo.show();
    return;
}
//hide all the rows
jo.hide();

//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
    var $t = $(this);
    for (var d = 0; d < data.length; ++d) {
        if ($t.is(":contains('" + data[d] + "')")) {
            return true;
        }
    }
    return false;
})
//show the rows that match.
.show();
  }
}).focus(function () {
this.value = "";
$(this).css({
    "color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="searchInput">
<option value="all">all</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
<option value="mouse">mouse</option>
</select>
<br/>
<table>
<thead>
    <tr>
        <th>Column1</th>
        <th>Column2</th>
    </tr>
</thead>
<tbody id="fbody">
    <tr>
        <td>cat</td>
        <td>one</td>
    </tr>
    <tr>
        <td>dog</td>
        <td>two</td>
    </tr>
    <tr>
        <td>cat</td>
        <td>three</td>
    </tr>
    <tr>
        <td>mouse</td>
        <td>four</td>
    </tr>
    <tr>
        <td>mouse</td>
        <td>five</td>
    </tr>
    <tr>
        <td>dog</td>
        <td>six</td>
    </tr>
</tbody>
</table>

2
  • El formato de la respuesta es el correcto. Pero en la pregunta piden resolver esto con un drop down list, conocido como <select> en HTML. Tú provees una implementación utilizando un campo de texto. Si una pregunta como esta necesita esclarecerse, lo recomendado es no responder y quizás poner una bandera para su atención. Existen otras preguntas en el sitio que quizás puedas atender :). Usuarios como tú que leen los comentarios y mejoran hacen esta labor más satisfactoria :D.
    – user227
    Commented el 18 may. 2016 a las 20:04
  • Muchas gracias! El unico problemita es que si se fijan, cuando seleccionas una opcion y luego volves a seleccionar "all" no muestra todas las filas, sino las ultimas seleccionadas.
    – Lucas. D
    Commented el 18 may. 2016 a las 20:17
0

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:

$(function(){
	var $tabla = $('#tabla');
	
	$('#selectCategory').change(function(){
		var value = $(this).val();
		if (value){
			$('tbody tr.' + value, $tabla).show();
			$('tbody tr:not(.' + value + ')', $tabla).hide();
		}
		else{
			// Se ha seleccionado All
			$('tbody tr', $tabla).show();
		}
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>Class:</span> 
<select id="selectCategory">
            <option value="">ALL</option>
            <option value="Scout">Scout</option>
            <option value="Soldier">Soldier</option>
            <option value="Pyro">Pyro</option>
            <option value="Demoman">Demoman</option>
            <option value="Heavy">Heavy</option>
            <option value="Engineer">Engineer</option>
            <option value="Medic">Medic</option>
            <option value="Sniper">Sniper</option>
            <option value="Spy">Spy</option>
        </select>
</div>

<table id="tabla" style=" width: 1000px; 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 class="Scout">
                <td><img src="#"/></td>
                <td>Beastly Bonnet</td>
                <td>1.33 refined</td>
                <td>1 refined</td>
                <td>33/100</td>
            </tr>

            <tr class="Soldier">
              <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>

2
  • Sos un maestro!! Super entendible el codigo, bien cortito, bien ordenado. Muchas gracias!
    – Lucas. D
    Commented el 18 may. 2016 a las 22:42
  • ¿hay forma de hacerlo múltiple opciones? Commented el 1 oct. 2018 a las 18:13
0

Hola solo debes modificar la linea:

if(this.value != "") // Solo modifique esta linea

Coloco todo el código que antes ya tenias. Saludos.

    $("#searchInput").change(function () {
    if(this.value != "") // Solo modifique esta linea
      {
    //split the current value of searchInput
    var data = this.value.split(" ");
    //create a jquery object of the rows
    var jo = $("#fbody").find("tr");
   
    if (this.value == "" || this.value=="all") {
        
        jo.show();
        return;
    }

    //hide all the rows
    jo.hide();

    //Recusively filter the jquery object to get results.
    jo.filter(function (i, v) {
        var $t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if ($t.is(":contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    })
    //show the rows that match.
    .show();
      }
    }).focus(function () {
    this.value = "";
    $(this).css({
        "color": "black"
    });
    $(this).unbind('focus');
    }).css({
    "color": "#C0C0C0"
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="searchInput">
<option value="all">all</option>
    <option value="cat">cat</option>
    <option value="dog">dog</option>
    <option value="mouse">mouse</option>
    </select>
    <br/>
    <table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
    </thead>
    <tbody id="fbody">
        <tr>
            <td>cat</td>
            <td>one</td>
        </tr>
        <tr>
            <td>dog</td>
            <td>two</td>
        </tr>
        <tr>
            <td>cat</td>
            <td>three</td>
        </tr>
        <tr>
            <td>mouse</td>
            <td>four</td>
        </tr>
        <tr>
            <td>mouse</td>
            <td>five</td>
        </tr>
        <tr>
            <td>dog</td>
            <td>six</td>
        </tr>
    </tbody>
    </table>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.