1

Buenas tardes tengo la sig tabla.

<table id="tabla_principal" class="table table-principal">
                <thead class="table-header">
                    <tr>
                        <th class="Actividad">Actividad General</th>
                        <th class="Entregable">Entregables</th>
                        <th class="Entregable_pre">Preliminar</th>
                        <th class="Entregable_pro">En proceso</th>
                        <th class="Entregable_fin">Final</th>
                    </tr>
                </thead>
                <tbody class="table-body " id="table_principal_body">
                                                <tr id="row_14259" class="nivel-1acordeon">
                            <td class="Actividad" onclick="muestraGeneral(14259);"><span>   8.1.        REALIZAR EL PROGRAMA DE TRABAJO </span> <span class="toggle-icon"><i id="chev" class="fas fa-chevron-left" style="margin-top: 2px;"></i><i id="1" class="fas fa-chevron-down" style="display: none;"></i></span></td>
                            <td class="Entregable"><a onclick="muestraTab(14259,1);">1</a></td>
                            <td class="Entregable_pre"><a onclick="muestraTab(14259,1);">1</a></td>
                            <td class="Entregable_pro"><a onclick="muestraTab(14259,1);">0</a></td>
                            <td class="Entregable_fin"><a onclick="muestraTab(14259,1);">0</a></td>
                        </tr></tbody>
            </table>

a la cual le agrego filas con la siguiente función.

function muestraGeneral(Id_actividad) {
    var Id_actividad = Id_actividad;
    if (!bandera_primer_clic.includes("row_" + Id_actividad)) {
        bandera_primer_clic.push("row_" + Id_actividad);
        $.post("Actividad_general.php", {
                Id_actividad: Id_actividad,
            },
            function(data) {
                $('#row_' + Id_actividad).after(data);
            });
    } else {
        ocultar_mostrar(Id_actividad);
    }
}

la fila o filas que agrega tienen la siguiente estructura

    <tr id="row_Hija_14259" class="hija" style='background : #cacaca;'>
        <td class="Actividad" onclick="muestraGeneral(14260);"><span>   8.1.1.      ELABORAR DIAGNÓSTICO DE ANTECEDENTES    </span> <span class="toggle-icon"></span></td>
        <td class="Entregable"><a onclick="">0</a></td>
        <td class="Entregable_pre"><a onclick="">0</a></td>
        <td class="Entregable_pro"><a onclick="">0</a></td>
        <td class="Entregable_fin"><a onclick="">0</a></td>
    </tr>
<tr id="row_Hija_14259" class="hija" style='background : #cacaca;'>
        <td class="Actividad" onclick="muestraGeneral(14261);"><span>   8.1.2.      CONCEPTUALIZAR EL PROGRAMA  </span> <span class="toggle-icon"></span></td>
        <td class="Entregable"><a onclick="">0</a></td>
        <td class="Entregable_pre"><a onclick="">0</a></td>
        <td class="Entregable_pro"><a onclick="">0</a></td>
        <td class="Entregable_fin"><a onclick="">0</a></td>
    </tr>

El problema con el que me encuentro es que necesito ocultar o volver a mostrar esta fila creada, logre ocultar la fila creada de la siguiente manera

function ocultar_mostrar(Id_actividad) {
    var sig_row = $('#row_Hija_' + Id_actividad);
        $(sig_row).toggle();

}

mi problema con mi solución es que en el caso de que halla mas de una fila como en el ejemplo de arriba solamente oculta la primera. mi pregunta es ¿Como puedo ocultar todas las final agregadas ? espero puedan ayudarme

2 respuestas 2

2

El problema que veo es que colocas filas con el mismo id y eso en HTML no es correcto, cada id debe ser único. Para diferencias las hijas puedes usar un campo data-id="Id_atividad"
Seleccionas todas las hijas pero solo ocultas las que tengas el valor de Id_actividad en el campo data-id.... las filas las dejaría como:

<tr id="row_Hija_14259" **data-id="14259"** class="hija" style='background : #cacaca;'>

Pero ojo con los id, no deben repetirse.

Y la función ocultar-mostrar quedaría:

function ocultar_mostrar(Id_actividad) {
    var sig_row = $('.hija');
    sig_row.each(function(i)
      {
        if($(this).data('id') == Id_actividad)
          $(this).toggle()
        
      }
    )
}

Con esto puedes borrar la fila que quieras y puedes repetir códigos en diferentes hijas.

1
  • muchas gracias por el consejo y por la ayuda , con la modificacion que me diste ya funciona sin problemas el 19 jul. 2021 a las 23:42
0
<tr id="result_tr" style="display: none;">

var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';

En tu codigo HTML puedes ponser eso y despues lo metes en una función de JavaScript

1
  • No se puede limitar a responder con un código y decirle, "toma, copia y pega, que ya verás como funciona". Porque el que hace la pregunta tendrá su codigo funcionando, pero no sabrá como funciona. Intenta editar su respuesta y explicar lo que hace y como lo hace. Un saludo
    – el.trasgu
    el 19 jul. 2021 a las 23:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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