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.