none
Modificar atributo CSS en tiempo de ejecución RRS feed

  • Pregunta

  • Hola a todos

    En una pagina he pegado literalmente una tabla de excel con "copia y pega" y ha funcionado, he preferido hacerlo así porque tiene muchas filas combinadas y celdas con colores identificativos además de hojas por cada día del mes y el usuario de la pagina quiere ver en pantalla como si de una hoja de excel se tratase. Hay celdas que son formulas y otras que tengo que rellenar con resultados de consultas SQL. Todo funciona bien, la tabla ha quedado del tipo  <table ... style ="...;display:block;" id="tabla"><tr><td></td></tr>, en las que tengo que rellenar he agregado Labels que las lleno con label.text=ds.Tables(0).Rows(0).Item(0) cuando se clickea un botón. Pero la tabla al cargar la pagina debe de estar oculta pues hasta que no se de click en el botón los Labels.text tienen el valor por defecto que es "Label", como no es runatserver no puedo modificar ningún tipo de propiedad .visible. He creado una sencilla función JS así:

            function MostrarTabla(i) {
                var t = document.getElementById("tabla");
                if ( i == 0 )
                     t.style.display = "none";
                else
                    t.style.display = "block";
            }
    que devería funcionar bien. El problema es que si incluyo en el código "ScriptManager.RegisterStartupScript(Me, Me.Page.GetType, "myFuncionAlerta", "MostrarTabla(0);", True)" en cualquier evento Page_xxxx no se ve la tabla pero cuando en el botón ejecuto "ScriptManager.RegisterStartupScript(Me, Me.Page.GetType, "myFuncionAlerta", "MostrarTabla(1);", True) la tabla sale en un flash pero se ejecutan todos los eventos Page_xxxx y se vuelve a ocultar. Lo que he hecho es definir en la <table>"display:none" y cuando se da click en el botón se muestra pero entonces no se ve en modo diseño. Cuando he tenido que agregar algo tengo que entrar en el marcado y "display:block" y la veo en el diseñador. ¿ Alguna sugerencia ?

    Gracias de antemano

    miércoles, 7 de diciembre de 2016 16:23

Respuestas

  • Hola Raimundo Ferrer,

    Ya que solo quieres usar el botón para mostrar la tabla, pienso que bastaría con crear una etiqueta tipo 'button' y asignarle mediante el onclick una función que muestre dicha tabla, pero antes de cargar la página ocultarla.

    Podrías hacer algo como :

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("tabla").style.display = 'none';
        };
    
        function showTable() {
            document.getElementById("tabla").style.display = 'block';
        }
    </script>

    Cuando la página esté cargada, ejecuta una función anónima para ocultar la tabla.

    <button onclick="showTable(); return false">Mostrar Tabla</button>

    El uso de 'return false' es importante para evitar hacer postback.

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    Hola Joel

    Gracias por tu respuesta. El botón no solo debe mostrar la tabla, también debe en el servidor ejecutar un procedimiento almacenado que llena los Labels que están en la tabla. He probado dos variantes. He incluido la funcion showTable() y el window.onload y la tabla empieza oculta


    1ra.- Como el botón original ejecuta un procedimiento del lado del servidor es runat="server" agregué entonces  OnClientClick="showTable(); return false" 

    2da.- He agregado <button id= "botonhide" onclick="showTable();return false" style ="display:none;"></button> para que no se vea y entonces he usado un ¿"truco"? , en el evento btn_Mostrar_Click(sender As Object, e As EventArgs) Handles Mostrar.Click despues de ejecutar mi SP he escrito ScriptManager.RegisterStartupScript(Me, Me.Page.GetType, "myFuncionAlerta", "ButtonHide();", True) y un "text/javascript" en el encabezado de la pagina

            function ButtonHide() {
                document.getElementById("botonhide").click(); }

    function showTable() {
                var t = document.getElementById("tabla");
                t.style.display = "block"; }

    pero no me han funcionado, cuando digo esto es que la tabla se me "esconde"

    Una tercera variante sería ejecutar desde javascript el btn_Mostrar_Click() o algun método, he tratado con un par de ejemplos y no lo logro.

    Saludos


    Hola

    Hay veces que busco soluciones por caminos muy largos cuando la solución es bien sencilla, dicho esto me respondo a mi mismo. Como lleno los Labels con datos de una SP el window.onload me queda así:

            window.onload = function () {
                var porcientocancelacionesomv = $('#<%=porcientocancelacionesomv.ClientID%>').html();
                var tabla = document.getElementById("tabla");
                if (porcientocancelacionesomv == 'Label') {
                    tabla.style.display = 'none';
                }
                else {
                    tabla.style.display = 'block';
                }
            };

    Saludos

    lunes, 12 de diciembre de 2016 14:19

Todas las respuestas

  • Hola Raimundo Ferrer,

    Ya que solo quieres usar el botón para mostrar la tabla, pienso que bastaría con crear una etiqueta tipo 'button' y asignarle mediante el onclick una función que muestre dicha tabla, pero antes de cargar la página ocultarla.

    Podrías hacer algo como :

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("tabla").style.display = 'none';
        };
    
        function showTable() {
            document.getElementById("tabla").style.display = 'block';
        }
    </script>

    Cuando la página esté cargada, ejecuta una función anónima para ocultar la tabla.

    <button onclick="showTable(); return false">Mostrar Tabla</button>

    El uso de 'return false' es importante para evitar hacer postback.

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    miércoles, 7 de diciembre de 2016 19:20
  • Hola Raimundo Ferrer,

    Ya que solo quieres usar el botón para mostrar la tabla, pienso que bastaría con crear una etiqueta tipo 'button' y asignarle mediante el onclick una función que muestre dicha tabla, pero antes de cargar la página ocultarla.

    Podrías hacer algo como :

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("tabla").style.display = 'none';
        };
    
        function showTable() {
            document.getElementById("tabla").style.display = 'block';
        }
    </script>

    Cuando la página esté cargada, ejecuta una función anónima para ocultar la tabla.

    <button onclick="showTable(); return false">Mostrar Tabla</button>

    El uso de 'return false' es importante para evitar hacer postback.

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    Hola Joel

    Gracias por tu respuesta. El botón no solo debe mostrar la tabla, también debe en el servidor ejecutar un procedimiento almacenado que llena los Labels que están en la tabla. He probado dos variantes. He incluido la funcion showTable() y el window.onload y la tabla empieza oculta


    1ra.- Como el botón original ejecuta un procedimiento del lado del servidor es runat="server" agregué entonces  OnClientClick="showTable(); return false" 

    2da.- He agregado <button id= "botonhide" onclick="showTable();return false" style ="display:none;"></button> para que no se vea y entonces he usado un ¿"truco"? , en el evento btn_Mostrar_Click(sender As Object, e As EventArgs) Handles Mostrar.Click despues de ejecutar mi SP he escrito ScriptManager.RegisterStartupScript(Me, Me.Page.GetType, "myFuncionAlerta", "ButtonHide();", True) y un "text/javascript" en el encabezado de la pagina

            function ButtonHide() {
                document.getElementById("botonhide").click(); }

    function showTable() {
                var t = document.getElementById("tabla");
                t.style.display = "block"; }

    pero no me han funcionado, cuando digo esto es que la tabla se me "esconde"

    Una tercera variante sería ejecutar desde javascript el btn_Mostrar_Click() o algun método, he tratado con un par de ejemplos y no lo logro.

    Saludos


    viernes, 9 de diciembre de 2016 16:55
  • Hola Raimundo Ferrer,

    Ya que solo quieres usar el botón para mostrar la tabla, pienso que bastaría con crear una etiqueta tipo 'button' y asignarle mediante el onclick una función que muestre dicha tabla, pero antes de cargar la página ocultarla.

    Podrías hacer algo como :

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("tabla").style.display = 'none';
        };
    
        function showTable() {
            document.getElementById("tabla").style.display = 'block';
        }
    </script>

    Cuando la página esté cargada, ejecuta una función anónima para ocultar la tabla.

    <button onclick="showTable(); return false">Mostrar Tabla</button>

    El uso de 'return false' es importante para evitar hacer postback.

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    Hola Joel

    Gracias por tu respuesta. El botón no solo debe mostrar la tabla, también debe en el servidor ejecutar un procedimiento almacenado que llena los Labels que están en la tabla. He probado dos variantes. He incluido la funcion showTable() y el window.onload y la tabla empieza oculta


    1ra.- Como el botón original ejecuta un procedimiento del lado del servidor es runat="server" agregué entonces  OnClientClick="showTable(); return false" 

    2da.- He agregado <button id= "botonhide" onclick="showTable();return false" style ="display:none;"></button> para que no se vea y entonces he usado un ¿"truco"? , en el evento btn_Mostrar_Click(sender As Object, e As EventArgs) Handles Mostrar.Click despues de ejecutar mi SP he escrito ScriptManager.RegisterStartupScript(Me, Me.Page.GetType, "myFuncionAlerta", "ButtonHide();", True) y un "text/javascript" en el encabezado de la pagina

            function ButtonHide() {
                document.getElementById("botonhide").click(); }

    function showTable() {
                var t = document.getElementById("tabla");
                t.style.display = "block"; }

    pero no me han funcionado, cuando digo esto es que la tabla se me "esconde"

    Una tercera variante sería ejecutar desde javascript el btn_Mostrar_Click() o algun método, he tratado con un par de ejemplos y no lo logro.

    Saludos


    Hola

    Hay veces que busco soluciones por caminos muy largos cuando la solución es bien sencilla, dicho esto me respondo a mi mismo. Como lleno los Labels con datos de una SP el window.onload me queda así:

            window.onload = function () {
                var porcientocancelacionesomv = $('#<%=porcientocancelacionesomv.ClientID%>').html();
                var tabla = document.getElementById("tabla");
                if (porcientocancelacionesomv == 'Label') {
                    tabla.style.display = 'none';
                }
                else {
                    tabla.style.display = 'block';
                }
            };

    Saludos

    lunes, 12 de diciembre de 2016 14:19