none
Funcion javascript ejecutada para validar datos de celdas de una tabla RRS feed

  • Pregunta

  • Buen dia para todos,

    Sucede que tengo una funcion javascript, dentro de la vista de una aplicacion MVC 4.

    Esta funcion intenta calcular el porcentaje o avance de lo que traiga esa celda, en sitensis avances de proyectos creados. Esto por cada celda de una tabla, entonces cuando se haga una consulta, la funcion debe dar el avance de cada fila en la celda porcentaje.

    La funcion esta asi:

    function ActualizarPorcentaje() {
        var hora_crea_ = [];
        var Hora_actual_ = [];
        var Minutos;
        var Minutos_Crea;
        var Hora_Real;
        var Hora_CREACION;
        var hora_Creacion = document.getElementById('Hora_Creacion_').innerHTML;
        var fecha_Creacion = document.getElementById('Fecha_Creacion').innerHTML;
        var Hora_Proyectadas_ = document.getElementById('Horas_Proyec_').innerHTML;
        var Hora_act_ = String(document.getElementById('reloj').value);
        var H_Laboral; //para calcular el valor de dias por hora laboral
        var SeLLeva; //para calcular el tiempo que lleva el requerimiento
        var Me_queda;
        var D_H_parcial;
        
    
        var f_dia = new Date();
        var fecha_actual = f_dia.getDate() + "/" + (f_dia.getMonth()+1 )+ "/" + f_dia.getFullYear();
        var total_porcentaje_; //variable de calculo de porcentaje
    
        //se calculan los dias transcurridos
        var F_actual = fecha_actual.split('/');
        var F_creacion = fecha_Creacion.split('/');
    
        var fFecha2 = Date.UTC(F_actual[2], F_actual[1] - 1, F_actual[0]);
        var fFecha1 = Date.UTC(F_creacion[2], F_creacion[1] - 1, F_creacion[0]);
        var dif = fFecha2 - fFecha1;
        var dias = Math.floor(dif / (1000 * 60 * 60 * 24));
    
        hora_crea_ = hora_Creacion.split(":"); //Arreglo de la hora de creacion  del requerimiento
        Hora_actual_ = Hora_act_.split(":"); //Arreglo de la hora actual o real del momento.
    
        Minutos = Hora_actual_[1] / 60; //se calcula la cantidad de minutos
        Minutos_Crea = hora_crea_[1] / 60; //se calcula la cantidad de minutos hora de creacion reque.
    
        Hora_Real =parseFloat(Hora_actual_[0]) + Minutos; //hora de consulta real. La del momento.
        Hora_CREACION =parseFloat(hora_crea_[0]) + Minutos_Crea; //hora en que se creo el requerimiento
    
    
        if (Hora_Proyectadas_ != 0) {
    
            if (Hora_Real >= 7.75 && Hora_Real <= 17.5) {
    
                H_Laboral = (dias * 9.75); //Se calcula los dias por horas laborales
    
                if (H_Laboral > 0) {
    //                D_H_parcial = 17.5 - Hora_CREACION;
    //                SeLLeva = (Hora_Real - 7.75) + D_H_parcial;
                    Me_queda = (dias * 9.75);
    
                    if (Hora_Proyectadas_ < Me_queda) {
    
                        total_porcentaje_ = 100;
                       
                    }
                    else {
                        total_porcentaje_ = (Me_queda * 100) / parseInt(Hora_Proyectadas_);
                                    
                    }   
                                   
                }
                else {
    
                    SeLLeva = Hora_Real - Hora_CREACION;
    
                    if (SeLLeva >= Hora_Proyectadas_) {
                        total_porcentaje_ = 100;
                        
                    }
                    else {
                        total_porcentaje_ = (SeLLeva * 100) / parseInt(Hora_Proyectadas_);
                        
                    }           
                }
            }        
    
        }
        else {
            total_porcentaje = 0;
            hora = 0;
        }
        
        //se muestran los resultados
        document.getElementById('progressBar').style.width = (total_porcentaje_) + '%';
        document.getElementById('por').innerHTML = total_porcentaje_.toFixed(2) + "%"; 
    
    }

    El porcentaje se muestra en una barra de estilo CSS(Bootstrap), asi como lo tengo solo se ejecuta en la ultima fila insertada, es decir tengo la vista de la tabla y el ultimo registro que ingreso solo de ese me muestra el porcentaje.

    No se como implementar para que muestre el porcentaje de todas las celdas al mismo tiempo.

    La funcion la cargo desde el Body (onload="ActualizarPorcentaje()")

    Gracias por su atencion.

    jueves, 9 de abril de 2015 21:06

Respuestas

  • Hola, respondo a mi mismo.Despuesd ebuscar por quie y alla, pude resolver como mostrar en todas las celdas mostradas.

    Use un for manipulando el DOM del HTML5:

    for (i = 0, j = rows.length; i < j; ++i) {
            cells = rows[i].getElementsByTagName('td');
            if (!cells.length) {
                continue;
            }

    y dentro de este la funcion pero si llamr los id de los componentes:

    hora_Creacion = cells[5].innerHTML;
    fecha_Creacion = cells[4].innerHTML;
    Hora_Proyectadas_ = cells[7].innerHTML;

    Ya que antes estaba asi:

    var hora_Creacion = document.getElementById('Hora_Creacion_').innerHTML;
    var fecha_Creacion = document.getElementById('Fecha_Creacion').innerHTML;
    var Hora_Proyectadas_ = document.getElementById('Horas_Proyec_').innerHTML;

    el resto de la funcion sigue igual, solo que al mostrar los resultados, llamo a el papa componente, donde esta el estilo de la barra donde se muestra el progreso de avance:

    Antes:

    document.getElementById('progressBar').style.width = (total_porcentaje_) + '%';
    document.getElementById('por').innerHTML = total_porcentaje_.toFixed(2) + '%';

    ahora:

     //se muestran los resultados
            cells[8].children[0].children[0].style.width = (total_porcentaje_) + '%';
            cells[8].children[0].children[0].children[0].innerHTML = total_porcentaje_.toFixed(0) + '%';

    por ultimo en la vista Html, no debo colocar el id al componente a manipular, ya que por el control DOM sobre el html, se hace directamente.:

    <td>
        <div class="progress">
           <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
                                     aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width:0%;" >
                                     <p></p>                            
       </div>
      </div>                        
    </td>

    El td anterior de la vista, en el javascript es el:

    cells[8].children[0].children[0].style.width = (total_porcentaje_) + '%';
            cells[8].children[0].children[0].children[0].innerHTML = total_porcentaje_.toFixed(0) + '%';

    ya con esto y el codigo inicial posteado, ya puedo mostrar el porcentaje de avance por cada solicitud impuesta.

    Saludos

    • Marcado como respuesta gilmo_26 sábado, 11 de abril de 2015 2:42
    sábado, 11 de abril de 2015 2:41

Todas las respuestas

  • Hola, respondo a mi mismo.Despuesd ebuscar por quie y alla, pude resolver como mostrar en todas las celdas mostradas.

    Use un for manipulando el DOM del HTML5:

    for (i = 0, j = rows.length; i < j; ++i) {
            cells = rows[i].getElementsByTagName('td');
            if (!cells.length) {
                continue;
            }

    y dentro de este la funcion pero si llamr los id de los componentes:

    hora_Creacion = cells[5].innerHTML;
    fecha_Creacion = cells[4].innerHTML;
    Hora_Proyectadas_ = cells[7].innerHTML;

    Ya que antes estaba asi:

    var hora_Creacion = document.getElementById('Hora_Creacion_').innerHTML;
    var fecha_Creacion = document.getElementById('Fecha_Creacion').innerHTML;
    var Hora_Proyectadas_ = document.getElementById('Horas_Proyec_').innerHTML;

    el resto de la funcion sigue igual, solo que al mostrar los resultados, llamo a el papa componente, donde esta el estilo de la barra donde se muestra el progreso de avance:

    Antes:

    document.getElementById('progressBar').style.width = (total_porcentaje_) + '%';
    document.getElementById('por').innerHTML = total_porcentaje_.toFixed(2) + '%';

    ahora:

     //se muestran los resultados
            cells[8].children[0].children[0].style.width = (total_porcentaje_) + '%';
            cells[8].children[0].children[0].children[0].innerHTML = total_porcentaje_.toFixed(0) + '%';

    por ultimo en la vista Html, no debo colocar el id al componente a manipular, ya que por el control DOM sobre el html, se hace directamente.:

    <td>
        <div class="progress">
           <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
                                     aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width:0%;" >
                                     <p></p>                            
       </div>
      </div>                        
    </td>

    El td anterior de la vista, en el javascript es el:

    cells[8].children[0].children[0].style.width = (total_porcentaje_) + '%';
            cells[8].children[0].children[0].children[0].innerHTML = total_porcentaje_.toFixed(0) + '%';

    ya con esto y el codigo inicial posteado, ya puedo mostrar el porcentaje de avance por cada solicitud impuesta.

    Saludos

    • Marcado como respuesta gilmo_26 sábado, 11 de abril de 2015 2:42
    sábado, 11 de abril de 2015 2:41
  • solo tiene una tabla en la pagina?


    G. Poliovei

    sábado, 11 de abril de 2015 2:51