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