JQuery muestra la fila de la tabla si se encuentra el valor

Question

Esto puede parecer similar a otras preguntas, y he encontrado y leído esas preguntas y las he probado, pero no he encontrado una solución que funcione, por supuesto, mi código es único y tal vez necesito otro par de ojos para ayudarme a encontrar mi error

De todos modos, el problema:

Estoy creando una tabla (con PHP), y esencialmente si una celda tiene un valor, la fila obtiene una identificación de 'foo' y está oculta (usando CSS - display: none;), y cuando hago clic en una casilla de verificación I ' Estoy tratando de mostrar todas esas filas ocultas.

<tr id='foo'><td>this row is hidden</td></tr>
<tr><td>this row is not hidden</td></tr>

Mi jQuery es actualmente esto:

$("#showHiddenRows").click(function() {
    if($(this).is(":checked")) {
        alert("showing"); //This pops up
        $("#tableName").each(function() {
            if($("#tableName").find("tr").attr("id") === 'foo') {
                $("#tableName").find("tr").attr("style", "display: initial;");
                alert("found a hidden row"); //This does not pop up...
            }
        });
    } else {
        alert("hiding");
        //essentially the same code here, but display:none;
    }

Así que agregué alertas como puede ver, aparecen las alertas "mostrando" y "ocultando", pero "no encontró una fila oculta", lo que implica que al buscar en mi tabla no se encuentran filas con un ID de ' foo ', y no estoy seguro de por qué. ¿Hay una mejor manera de hacer esto / es esta la mejor manera, y si es así, qué hice mal?

¡Gracias de antemano!

Editar: explicación rápida de lo que tenía la intención de hacer el código:

Recorre cada fila en la tabla tableName
Si encuentra un tablerow con una identificación de 'foo', muestre u oculte la fila.

javascript php jquery html css

0

Corey Thompson 29 ago. 2014 a las 07:56

Answer 1

No utilice ID duplicados ; use una clase CSS en su lugar. Por definición, los ID deben ser únicos; por lo tanto, no hay dos o más elementos que tengan la misma ID.

HTML:

<tr class='foo'><td>this row is hidden</td></tr>
<tr><td>this row is not hidden</td></tr>

JS:

$(function() {
    $("#showHiddenRows").on('change', function() {
        if( this.checked ) {
            $('table tr.foo').show();
        } else {
            $('table tr.foo').hide();
        }
    });
});

O, podría acortarlo así :

$(function() {
    $("#showHiddenRows").on('change', function() {
        $('table tr.foo')[ this.checked ? 'show' : 'hide' ]();
    });
});

1

PeterKA 29 ago. 2014 a las 04:56

Answer 2

Terminó con (gracias al usuario 3558931):

$(function() {
    $("#tableName").on('change', function() {
        if($(this).(":checked")) {
            $('#tableName tr#foo').show();
        } else {
            $('#tableName tr#foo').hide();
        }
    });
});

0

Corey Thompson 29 ago. 2014 a las 04:24

Answer 3

Usar una identificación no única con jQuery causará problemas, pero lo dejaré con usted

Esto es lo que debe hacer para show filas ocultas.

$("#showHiddenRows").click(function() {
    if($(this).is(":checked")) {
      $("#tableName").each(function() {
        var table = $(this);
        var hiddenRows = table.find("tr[id=foo]").show();
        if(hiddenRows.length)
          alert("found " + hiddenRows.length + " hidden rows");
      });
    } else {
       alert("hiding");
    }
});

1

Neverever 29 ago. 2014 a las 04:13

JQuery muestra la fila de la tabla si se encuentra el valor

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript