Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Mostrar y ocultar elementos td clases javascript

Estas en el tema de Mostrar y ocultar elementos td clases javascript en el foro de Javascript en Foros del Web. Buenos días, tengo el siguiente problema y ya no se como solucionarlo, la verdad intenté de todo pero llegué al limite de mis conocimientos. Necesitaría ...
  #1 (permalink)  
Antiguo 13/05/2014, 11:09
 
Fecha de Ingreso: junio-2008
Mensajes: 43
Antigüedad: 16 años, 5 meses
Puntos: 0
Mostrar y ocultar elementos td clases javascript

Buenos días, tengo el siguiente problema y ya no se como solucionarlo, la verdad intenté de todo pero llegué al limite de mis conocimientos. Necesitaría mostrar y ocultar varias tablas cuando me lo pide y para eso tengo que usar clases no id.
Ejemplo quiero ocultar todas las clases que no sean del 2014 al seleccionar 2014 en select option:

<select id="options">
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>

<tr class="2014">texto1</tr>
<tr class="2014">texto2</tr>
<tr class="2014">texto3</tr>
<tr class="2013">texto1</tr>
<tr class="2013">texto2</tr>
<tr class="2013">texto3</tr>
<tr class="2012">texto1</tr>
<tr class="2012">texto2</tr>
<tr class="2012">texto3</tr>

Mi código javascript es el siguiente, lo encontré en una página pero no lo pude modificar mucho ya que getElementsbyClassName no funciona:

<script>

function toggleOption(thisselect) {
var selected = thisselect.options[thisselect.selectedIndex].value;
toggleRow(selected);
}

function toggleRow(id) {
var row = document.getElementById(id);
if (row.style.display == '') {
row.style.display = 'none';
}
else {
row.style.display = '';
}
}

function showRow(id) {
var row = document.getElementById(id);
row.style.display = '';
}

function hideRow(id) {
var row = document.getElementById(id);
row.style.display = 'none';
}

function hideAll() {
hideRow('2014');
hideRow('2013');
hideRow('2012');
hideRow('2011');
}

</script>

Desde ya muchas gracias.
  #2 (permalink)  
Antiguo 14/05/2014, 06:12
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Mostrar y ocultar elementos td clases javascript

Usa

getElementsbyTagName("tr").className=="NombreDeLaC lasse"

(ojo que nos muestras una tabla con trs sin tds)
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
  #3 (permalink)  
Antiguo 14/05/2014, 07:57
 
Fecha de Ingreso: junio-2008
Mensajes: 43
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: Mostrar y ocultar elementos td clases javascript

No lo puedo hacer funcionar, como quedaría el código???
  #4 (permalink)  
Antiguo 15/05/2014, 10:00
 
Fecha de Ingreso: diciembre-2013
Mensajes: 108
Antigüedad: 11 años
Puntos: 1
Respuesta: Mostrar y ocultar elementos td clases javascript

Cita:
Iniciado por HmrO Ver Mensaje
No lo puedo hacer funcionar, como quedaría el código???
Disculpa la ignorancia pero antes de ayudarte porque no usar id???
  #5 (permalink)  
Antiguo 15/05/2014, 10:26
 
Fecha de Ingreso: junio-2008
Mensajes: 43
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: Mostrar y ocultar elementos td clases javascript

Porque ID solo sirve en un solo elemento, yo quiero ocultar varios.
  #6 (permalink)  
Antiguo 15/05/2014, 10:35
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Mostrar y ocultar elementos td clases javascript

Afecta al conjunto completo de tr y oculta a aquellos que posean por clase el valor seleccionado en el <select>.

Código Javascript:
Ver original
  1. var select = document.getElementById("options"),
  2.     forEach = Array.prototype.forEach;
  3.  
  4. select.addEventListener("change", function(){
  5.     forEach.call(document.getElementsByTagName("tr"), function(tr){
  6.         tr.style.display = tr.className == select.value ? "none" : "block";
  7.     });
  8. }, false);



Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #7 (permalink)  
Antiguo 15/05/2014, 11:36
 
Fecha de Ingreso: junio-2008
Mensajes: 43
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: Mostrar y ocultar elementos td clases javascript

Sos un genio, la verdad me salvaste... Igual tuve que copiar el JS del fuente porque estaba a medias en el que pusiste. MUCHISIMAS GRACIAS""""

Etiquetas: clases, elementos, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:24.