Foros del Web » Creando para Internet » HTML »

Script OnLoad no permite cambiar el estilo en tabla

Estas en el tema de Script OnLoad no permite cambiar el estilo en tabla en el foro de HTML en Foros del Web. Hola a todos, Estoy realizando una pantalla de consulta, en donde tengo una tabla de html, en ésta se encuentra una columna con una imágen ...
  #1 (permalink)  
Antiguo 12/06/2012, 10:35
Avatar de khristian_696  
Fecha de Ingreso: agosto-2008
Mensajes: 27
Antigüedad: 15 años, 8 meses
Puntos: 4
Sonrisa Script OnLoad no permite cambiar el estilo en tabla

Hola a todos,
Estoy realizando una pantalla de consulta, en donde tengo una tabla de html, en ésta se encuentra una columna con una imágen simulando un botón para poder editar la información del registro seleccionado ,existe otra columna que contiene una fecha y una última que muestra el estatus . El funcionamiento de la tabla consiste en que la fila que esté seleccionada cambiará de color, o bien cierta combinación de estatus y fecha hará que cambie de color la fila aun cuando no esté seleccionada. El cambio de color lo realiza un javascript y funciona perfectamente. El tema es que tuve que realizar un ajuste para que la cabecera se quedara fija y con esto cuando selecciono una fila diferente no realiza el cambio, me parece haber leido en algún post que aveces los métodos que están en en onload ya sea del window o del body pueden pisar los estilos ya definidos.


Código:
 <script type="text/javascript">
                
                function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
                var tbl = document.getElementById(gridId);
                if (tbl) {
                var DivHR = document.getElementById(''DivHeaderRow'');
                var DivMC = document.getElementById(''DivMainContent'');
                var DivFR = document.getElementById(''DivFooterRow'');


                //*** Set divheaderRow Properties ****
                DivHR.style.height = headerHeight + ''px'';
                DivHR.style.width = (parseInt(width) - 16) + ''px'';
                DivHR.style.position = ''relative'';
                DivHR.style.top = ''0px'';
                DivHR.style.zIndex = ''30'';
                DivHR.style.verticalAlign = ''top'';


                //*** Set divMainContent Properties ****
                DivMC.style.width = width + ''.px'';
                DivMC.style.height = height + ''.px'';
                DivMC.style.position = ''relative'';
                DivMC.style.top = -headerHeight + ''.px'';
                DivMC.style.zIndex = ''20'';


                //*** Set divFooterRow Properties ****
                DivFR.style.width = (parseInt(width) - 16) + ''px'';
                DivFR.style.position = ''relative'';
                DivFR.style.top = -headerHeight + ''px'';
                DivFR.style.verticalAlign = ''top'';
                DivFR.style.paddingtop = ''2px'';


                if (isFooter) {
                 var tblfr = tbl.cloneNode(true);
                 tblfr.removeChild(tblfr.getElementsByTagName(''tbody'')[0]);
                 var tblBody = document.createElement(''tbody'');
                 tblfr.style.width = ''100%'';
                 tblfr.cellSpacing = "0";
                 //*****In the case of Footer Row *******
                 tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
                 tblfr.appendChild(tblBody);
                 DivFR.appendChild(tblfr);
                 }
                //****Copy Header in divHeaderRow****
                DivHR.appendChild(tbl.cloneNode(true));
             }
            }
    
            function activateThisRow(row,flgMuestra) {
              var table = document.getElementById(''pricetable'');
              var form = document.getElementById(''prices'');
             
              //Removemos las clases de los tds que esten en on
              var tds = table.getElementsByTagName(''td'');
                               
              for(var m=0;m<tds.length;m++)
              { 
                  removeClassName(tds[m], ''on'');
              }

              // Asignamos las clases de los tds que se hayan seleccionado         
              var newths    = getElementsByClassName(row, ''td'', table);         
          
              var aValores = new Array();
              for (var h=0; h<newths.length; h++) 
              {  
                    addClassName(newths[h], ''on''); 
                    newths[h].style.display = '''';            
                    aValores[h]= newths[h].innerHTML;
              }
                
              var costo = aValores[6].substring(aValores[6].indexOf(".html\">")+7,aValores[6].toUpperCase().indexOf("</A>"));                                 

               //Determinamos los valores del formulario de editar
              document.getElementById(''PI_ID_COSTO'').value  =aValores[3];        
              document.getElementById(''PI_COSTO'').value    = costo;

              // show the form!
              if(flgMuestra==1)
              {
                form.style.display = ''block'';
              }
            }
            
    
            function OnScrollDiv(Scrollablediv) {
            document.getElementById(''DivHeaderRow'').scrollLeft = Scrollablediv.scrollLeft;
            document.getElementById(''DivFooterRow'').scrollLeft = Scrollablediv.scrollLeft;
            }
            
            function inicio()
            {
                     //Esta es la función que mando a llamar en en onLoad del body
                     //Parámetros 1.-Nombre Tabla,.-Ancho3.-Alto,4.-Tamanio cabeceras,5.-Si necesito que se muestre la última fila como footer
                     MakeStaticHeader(''pricetable'', 450, 700, 32, false);
            }
Espero me puedan ayudar y de antemano muchas gracias
  #2 (permalink)  
Antiguo 15/06/2012, 08:45
Avatar de khristian_696  
Fecha de Ingreso: agosto-2008
Mensajes: 27
Antigüedad: 15 años, 8 meses
Puntos: 4
Respuesta: Script OnLoad no permite cambiar el estilo en tabla

Su ayuda please!!!!
  #3 (permalink)  
Antiguo 15/06/2012, 09:55
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Script OnLoad no permite cambiar el estilo en tabla

Esa función que hiciste debe ser para tablas de verdad. Las que tienen una cabecera fija, rara vez lo son. Están simuladas y son en verdad más de una tabla.
Habría que ver el código completo y funcionando.
Por qué no pones uno y vemos qué se nos ocurre. Mira también el editor que estás usando, porque te reemplaza las comillas dobles por doble comilla.

El problema puede ser complejo si alguien lo toma desde el principio, desde cero. Puede que por eso se demoren las respuestas. Vas a tener que tener paciencia y no levantar el tema con gritos.
  #4 (permalink)  
Antiguo 15/06/2012, 10:36
Avatar de khristian_696  
Fecha de Ingreso: agosto-2008
Mensajes: 27
Antigüedad: 15 años, 8 meses
Puntos: 4
Respuesta: Script OnLoad no permite cambiar el estilo en tabla

Gracias por responder furoya, el código lo he recortado un poco debido a que es muy largo, sin embargo les dejó lo que a mi consideración es la escencia del código:
Código:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
function activateThisRow(row,flgMuestra){
var table = document.getElementById('pricetable');
var form = document.getElementById('prices');
var formNotas = document.getElementById('divNotas');
var frmMain = document.getElementById('frmMain');
//Removemos las clases de los tds que esten en on
var tds = table.getElementsByTagName('td');
var fecha ="0";
var estatus ="0";
for(var m=0;m<tds.length;m++)
{
if(tds[m].className.substr(8,2)=='on')
{
if(fecha=="0")
{
fecha = tds[m+9].innerHTML;
estatus = tds[m+12].innerHTML.toUpperCase();
estatus = estatus.replace("?,"A");
estatus = estatus.replace("?,"E");
estatus = estatus.replace("?,"I");
estatus = estatus.replace("?,"O");
estatus = estatus.replace("?,"U");
}
removeClassName(tds[m],'on');
var diferencia=diferenciaFechas(fecha,"15/06/2012");
var dias = Math.floor(diferencia /(1000 * 60 * 60 * 24));
if(estatus!="EN PRODUCCION"&& estatus!="DETENIDO"&& estatus!="CANCELADO")
{
if(dias<=5 && dias>=3 )
{
addClassName(tds[m],'yellow');
}
else if(dias<=3)
{
addClassName(tds[m],'red');
}
}
}
else
{
addClassName(tds[m],'');
}
}
// Asignamos las clases de los tds que se hayan seleccionado 
var newths = getElementsByClassName(row,'td', table);
var aValores = new Array();
for (var h=0; h<newths.length; h++){
//No aplicamos el estilo en la ?a columna que contiene la descripci??ompleta
if(h<=17)
{
removeClassName(newths[h],'red');
removeClassName(newths[h],'yellow');
addClassName(newths[h],'on');
newths[h].style.display ='';
}
aValores[h]= newths[h].innerHTML;
// not all browsers like display ='block' for cells
}
//Determinamos los valores del formulario de editar
document.getElementById('PI_ID_ACTIVIDAD').value = aValores[3];
document.getElementById('PI_FECHA_INICIAL').value = aValores[8];
document.getElementById('PI_FECHA_COMPROMISO').value = aValores[9];
document.getElementById('PI_FECHA_COMP_INI').value = aValores[9];
document.getElementById('PI_ID_PRIORIDAD').value = aValores[10];
aValores[12]= aValores[12].toUpperCase();
aValores[12]=aValores[12].replace("?,"A");
aValores[12]=aValores[12].replace("?,"E");
aValores[12]=aValores[12].replace("?,"I");
aValores[12]=aValores[12].replace("?,"O");
aValores[12]=aValores[12].replace("?,"U");
frmMain.PI_ID_ESTATUS.selectedIndex = getIdEstatus(aValores[12]);
frmMain.PI_AVANCE.value = aValores[11];
frmMain.PI_COMENTARIOS.value = aValores[18];
frmMain.PI_NOTA.value = aValores[19];
frmMain.PI_NOTA_ANT.value = aValores[19];
//Determinamos los valores para el formulario de Notas
document.getElementById('PI_ID_ACTIVIDAD_N').value = aValores[3];
document.getElementById('PI_NOTAS').value = aValores[19];
document.getElementById('PI_FLG_NOTA').value = aValores[20];
// show the form!
if(flgMuestra==1)
{
form.style.display ='block';
}
else if(flgMuestra==2)
{
formNotas.style.display ='block';
}
}
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter){
var tbl = document.getElementById(gridId);
if (tbl){
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('DivMainContent');
var DivFR = document.getElementById('DivFooterRow');
 
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight +'px';
DivHR.style.width =(parseInt(width)- 16)+'px';
DivHR.style.position ='relative';
DivHR.style.top ='0px';
DivHR.style.zIndex ='30';
DivHR.style.verticalAlign ='top';
//*** Set divMainContent Properties ****
DivMC.style.width = width +'.px';
DivMC.style.height = height +'.px';
DivMC.style.position ='relative';
DivMC.style.top =-headerHeight +'.px';
DivMC.style.zIndex ='20';
 
//*** Set divFooterRow Properties ****
DivFR.style.width =(parseInt(width)- 16)+'px';
DivFR.style.position ='relative';
DivFR.style.top =-headerHeight +'px';
DivFR.style.verticalAlign ='top';
DivFR.style.paddingtop ='2px';
 
if (isFooter){
var tblfr = tbl.cloneNode(true);
tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
var tblBody = document.createElement('tbody');
tblfr.style.width ='100%';
tblfr.cellSpacing ="0";
//*****In the case of Footer Row *******
tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
tblfr.appendChild(tblBody);
DivFR.appendChild(tblfr);
}
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
}
}
function OnScrollDiv(Scrollablediv){
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow').scrollLeft = Scrollablediv.scrollLeft;
}
window.onload=function(){
Nifty("ul#split h3","top");
Nifty("ul#split div","none same-height");
MakeStaticHeader('pricetable', 450, 1000, 32, false)
}
if (window.addEventListener)
{
window.addEventListener("keydown", compruebaTecla, false);
}
else if (document.attachEvent)
{
document.attachEvent("onkeydown", compruebaTecla);
}
</script>
</head>
<body background="images\modbkgnd.jpg">
<div style="FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR:#330066; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left"><center>Consulta de actividades registradas</center></div>
</br>
<div id="DivRoot" align="left">
<div style="overflow: hidden;" id="DivHeaderRow">
</div>
<div id="DivMainContent" style="overflow:scroll;" onscroll="OnScrollDiv(this)" id="DivMainContent">
<table id="pricetable">
<thead >
<tr>
<th class="side">#</th>
<th class="side">Editar</th>
<th class="side">Nota</th>
<th class="side">ID</th>
<th class="side">Nombre Gerente</th>
<th class="side">Actividad</th>
<th class="side">Persona Asignada</th>
<th class="side">Requerimiento</th>
<th class="side">Fecha Inicio</th>
<th class="side">Fecha Compromiso</th>
<th class="side">Prioridad</th>
<th class="side">% Avance</th>
<th class="side">Estatus</th>
<th class="side">Fecha Alta</th>
<th class="side">Usuario Alta</th>
<th class="side">Fecha Modificaci??th>
<th class="side">Usuario modificaci??th>
<th class="side">Comentarios</th>
<th class="side" style="display:none;">Comentarios</th>
<th class="side" style="display:none;">Notas</th>
<th class="side" style="display:none;">FLG_NOTA</th>
</tr>
</thead>
<tbody>
<tr >
<td class="choice1 on">1</td>
<td class="choice1 on"><a href="signUpChoice1.html" onclick="activateThisRow('choice1',1);return false;"><img src="\images\edit.png" alt="Editar" width="20",height="20"/></a></td>
<td class="choice1 on"><a href="notasChoice1.html" onclick="activateThisRow('choice1',2);return false;"><img src="\images\prendido.png" alt="Nueva nota" width="20",height="20"/></a></td>
<td class="choice1 on">187</td>
<td class="choice1 on">Israel</td>
<td class="choice1 on">sd</td>
<td class="choice1 on">Christian</td>
<td class="choice1 on">a</td>
<td class="choice1 on">30/05/2012</td>
<td class="choice1 on">30/05/2012</td>
<td class="choice1 on">2</td>
<td class="choice1 on">10</td>
<td class="choice1 on">En proceso</td>
<td class="choice1 on">30/05/2012 18:11:38</td>
<td class="choice1 on">Israel</td>
<td class="choice1 on">12/06/2012 10:11:51</td>
<td class="choice1 on">Christian</td><td class="choice1 on">sdf</td><td class="choice1" style="display:none;">sdf</td><td class="choice1" style="display:none;">asd</td><td class="choice1" style="display:none;">1</td></tr>
</tbody>
</table>
</div>
<div id="DivFooterRow" style="overflow:hidden">
</div>
</div>
</body>
</html>
Y lo de las comillas es porque la programación se hace desde la BD, en mi caso con el IDE de TOAD, es por eso que pongo dobles comillas ya que en el renderizado el compilador las representa como una sola.
De cualquier manera quedo pendiente de las dudas o comentarios.
  #5 (permalink)  
Antiguo 15/06/2012, 14:36
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Script OnLoad no permite cambiar el estilo en tabla

Le di una mirada al código. Y está lleno de errores. Te comento algunos.

Aparece una función

Código:
Nifty("ul#split h3","top");
Nifty("ul#split div","none same-height");
que no está en el código


Hay algunas líneas que asignan valores CSS, pero están mal escritas

Código:
DivMC.style.top =-headerHeight +'.px'; 
//le sobra un punto antes de px

Qué debería hacer esta sintaxis de expresión regular?

Código:
aValores[12]=aValores[12].replace("?,"A");

Qué sería "compruebaTecla" ?


Lo de fijar la cabecera en el ejemplo no está, o está incompleto. Vamos a hacer una cosa. Tratemos de ver primero los cambios de colores. Al menos para que pueda entender en qué casos se dan. Una vez que estén funcionando correctamente, se le agrega el encabezado fijo.

No creo que en el ejemplo hagan falta tantas columnas, y sí hacen falta unas cuantas filas.

Postea un ejemplo que funcione (éste ni lo probaste) y partimos de ahí.

La otra opción es que expliques claramente qué necesitas, y entonces alguien te hace el trabajo completo.
Pero eso iría en el foro de Empleo.


P.D.: ¿Y por qué estamos en el Foro de HTML5?
  #6 (permalink)  
Antiguo 15/06/2012, 16:24
Avatar de khristian_696  
Fecha de Ingreso: agosto-2008
Mensajes: 27
Antigüedad: 15 años, 8 meses
Puntos: 4
Respuesta: Script OnLoad no permite cambiar el estilo en tabla

Gracias nuevamente furoya, te comentaba que el código no está completo debido a que es demasiado extenso es por eso que no encuentras ciertas referencias, y a mi consideración esa es la escencia del programa.

No es mi intención que nadie trabaje por mí, aclaro, el desarrollo tiene el 99% de funcionalidad, sólo que al implementar esta bendita cabecera fija, creí conveniente esta solución debido a que arriba de mi tabla tengo un div con filtros los cuales siempre permanecen a la vista ya que la tabla se encuentra en un div que tiene scrollbars y eso es un plus.

Yendo más al grano, estuve debugueando el código y el problema está en la siguiente función que es la que hace el efecto de la cabecera fija, si yo comento la línea que marco con rojo, la tabla recupera su funcionalidad pero obviamente la cabecera deja de ser fija, de hecho estoy investigando a fondo
que realiza DivHR.appendChild(tbl.cloneNode(true)); (En específico "tbl.cloneNode(true)"), sé que se agrega la cabecera al div que fungirá como cabecera pero hasta ahí.

Código:
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
                var tbl = document.getElementById(gridId);
                if (tbl) {
                var DivHR = document.getElementById('DivHeaderRow');
                var DivMC = document.getElementById('DivMainContent');
                var DivFR = document.getElementById('DivFooterRow');

                //*** Set divheaderRow Properties ****
                DivHR.style.height = headerHeight + 'px';
                DivHR.style.width = (parseInt(width) - 16) + 'px';
                DivHR.style.position = 'relative';
                DivHR.style.top = '0px';
                DivHR.style.zIndex = '30';
                DivHR.style.verticalAlign = 'top';

                //*** Set divMainContent Properties ****
                DivMC.style.width = width + '.px';
                DivMC.style.height = height + '.px';
                DivMC.style.position = 'relative';
                DivMC.style.top = -headerHeight + '.px';
                DivMC.style.zIndex = '20';

                //*** Set divFooterRow Properties ****
                DivFR.style.width = (parseInt(width) - 16) + 'px';
                DivFR.style.position = 'relative';
                DivFR.style.top = -headerHeight + 'px';
                DivFR.style.verticalAlign = 'top';
                DivFR.style.paddingtop = '2px';

                if (isFooter) {
                 var tblfr = tbl.cloneNode(true);
                 tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
                 var tblBody = document.createElement('tbody');
                 tblfr.style.width = '100%';
                 tblfr.cellSpacing = "0";
                 //*****In the case of Footer Row *******
                 tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
                 tblfr.appendChild(tblBody);
                 DivFR.appendChild(tblfr);
                 }
                 
                //****Copy Header in divHeaderRow****
          DivHR.appendChild(tbl.cloneNode(true));
                           
             }
            }

Agradezco tu tiempo y apoyo.
Saludos
  #7 (permalink)  
Antiguo 15/06/2012, 18:54
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Script OnLoad no permite cambiar el estilo en tabla

Sigue sin funcionar.

Esa línea lo único que hace es copiar la tablehead para meterla en un div.
Y no me gusta cómo trabaja este escript.

Ahora caigo : el programa no es tuyo, los copiaste y pegaste juntos. Como dije muchas veces, los cut&paste son para usarlos como están. Adaptarlos puede dar más trabajo que escribirlos de nuevo.

Olvídate del encabezado fijo. Primero tiene que funcionar el cambio de colores. Cuando lo tengas listo posteas el código. Supongo que las clases las da un PHP, así que si tengo que probar con más casos me dices cuáles tengo que cambiar a mano.
Y ya que estamos, en vez de enlaces usa el evento directamente sobre la imagen. De cualquier forma el link no funciona; y aprovecha para darles una ruta absoluta, así puedo ver los íconos.

Más miro el ejemplo y más encuentro para objetar, pero ni vale la pena, cuando esté la primera versión funcionando vemos qué se puede mejorar.

De nada.
  #8 (permalink)  
Antiguo 18/06/2012, 09:22
Avatar de khristian_696  
Fecha de Ingreso: agosto-2008
Mensajes: 27
Antigüedad: 15 años, 8 meses
Puntos: 4
Respuesta: Script OnLoad no permite cambiar el estilo en tabla

furoya,
ya no se si esto debe molestarme o darme risa!!!

Al parecer no estámos en el mismo canal, tu mismo comentaste mi post [URL]http://www.forosdelweb.com/f4/tabla-html-con-cabecera-fija-scroll-vertical-horizontal-996505[/URL] en donde yo te comenté que el código no era mio y que lo había tomado de otro link.

Por otro lado como ya lo había comentado "la programación se hace desde la BD, en mi caso con el IDE de TOAD" mediante un package y procedimientos almacenados, no existen clases.

Te repito, no puedo subir tódo el código porque es demasiado código y me aparece un mensaje de que el mensaje es demasiado largo, es por eso que tuve que recortarlo, ya que muchos de los métodos son validaciones y cosas por el estilo que no son relevantes para entender el problema.

Y por último nuevamente te comentó que ya lo tengo funcionando al 99% lo único que me falta es dejar fija la cabecera y los filtros sin que afecte al funcionamiento(cambio de colores) de la tabla.

En fin de cualquier manera agradezco tu respuesta y seguiré intentado solucionar este tema.

Última edición por khristian_696; 18/06/2012 a las 10:24
  #9 (permalink)  
Antiguo 18/06/2012, 18:06
Avatar de khristian_696  
Fecha de Ingreso: agosto-2008
Mensajes: 27
Antigüedad: 15 años, 8 meses
Puntos: 4
Respuesta: Script OnLoad no permite cambiar el estilo en tabla(Solucionado)

Bueno, finalmente lo he logrado y fue cuestión de una sola linea que marco en rojo en el siguiente código

Código:
 function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
        var tbl = document.getElementById(gridId);
        if (tbl) {
        var DivHR = document.getElementById(''DivHeaderRow'');
        var DivMC = document.getElementById(''DivMainContent'');
        var DivFR = document.getElementById(''DivFooterRow'');

        //*** Set divheaderRow Properties ****
        DivHR.style.height = headerHeight + ''px'';
        DivHR.style.width = (parseInt(width) - 16) + ''px'';
        DivHR.style.position = ''relative'';
        DivHR.style.top = ''0px'';
        DivHR.style.zIndex = ''30'';
        DivHR.style.verticalAlign = ''top'';

        //*** Set divMainContent Properties ****
        DivMC.style.width = width + ''.px'';
        DivMC.style.height = height + ''.px'';
        DivMC.style.position = ''relative'';
        DivMC.style.top = -headerHeight + ''.px'';
        DivMC.style.zIndex = ''20'';

        //*** Set divFooterRow Properties ****
        DivFR.style.width = (parseInt(width) - 16) + ''px'';
        DivFR.style.position = ''relative'';
        DivFR.style.top = -headerHeight + ''px'';
        DivFR.style.verticalAlign = ''top'';
        DivFR.style.paddingtop = ''2px'';

        if (isFooter) {
         var tblfr = tbl.cloneNode(true);
      tblfr.removeChild(tblfr.getElementsByTagName(''tbody'')[0]);
         var tblBody = document.createElement(''tbody'');
         tblfr.style.width = ''100%'';
         tblfr.cellSpacing = "0";
         //*****In the case of Footer Row *******
         tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
         tblfr.appendChild(tblBody);
         DivFR.appendChild(tblfr);
         }
        //****Copy Header in divHeaderRow****
       
       DivHR.appendChild(tbl.cloneNode(true));
       DivHR.firstChild.id='newTable' 
Con la línea DivHR.appendChild(tbl.cloneNode(true)); (se agrega la tabla completa al DIV pero sólo se ve el cabecero ya que en el estilo que aplicamos le damos un cierto alto al div y por eso sólo se muestra la cabecera)
El id es el mismo y por ende tenemos 1 id igual para 2 tablas diferentes, lo único que hice fue cambiarle el id a la nueva tabla que agregamos al div como cabecero y enseguida la tabla recobró su funcionalidad.

Saludos.

Etiquetas: estilos, eventos, problema-con-tabla, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:04.