Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leandro de Faria

[Resolvido] CSS não atualiza com Javascript

Por , em Javascript

Recommended Posts

Leandro de Faria    0

Leandro de Faria
Postado

Pessoal,

 

Estou criando <tr> dinamicamente usando javascript, quando o usuario clica em algum link, o meu form vai criando <td> e tal..

Até ai tudo bem, mais existe um CSS para este <td> criando automaticamente mas não tá funcionando, ou seja, não está aplicando o CSS. estou fazendo dessa forma:

 

if (parseInt(cItmSol) == parseInt(cItmRat)){
aItmRat = aRateio[nXI].split(";")
newCell0.innerHTML = '<td class="itDarkBlueLine" > '+aItmRat[1]+' </td>';  
newCell1.innerHTML = '<td class="itDarkBlueLine" > '+aItmRat[2]+' </td>'; 
newCell2.innerHTML = '<td class="itDarkBlueLine" > '+aItmRat[3]+' </td>';
newCell3.innerHTML = '<td class="itDarkBlueLine" > '+aItmRat[4]+' </td>';
}

 

Alguém sabe o que pode ser?

 

P.S.: O estilo está OK, ou seja, utilizo ele em outras tabela deste formulário.

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

conhece o Firebug ?

 

como está o estilo ?

não vejo nada errado nesse trecho de js.

 

 

Se possível poste um link, para debugarmos online.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ok, então poste um trecho de código isolado, mínimo para que eu possa rodar, e verificar onde ocorre o problema.

 

HTML+CSS+JS.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não rola cara.. coloque no fórum, pois assim mais pessoas podem te ajudar.

 

se quiser que eu preste uma consultoria, ai eu cobro por hora. :lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro de Faria    0

Leandro de Faria
Postado

Ok, vou mandar a parte do código onde tá dando o problema:

 

Código html onde deveria ser chamado o css:

 

<table id="tabrateio" width="100%" border="0" align="center" cellpadding="1" cellspacing="0" bgcolor="#A4C2DE"> 
  <tr>
   <td class="itDarkBlueLine" width="20"><b>Item		</b></td>
   <td class="itDarkBlueLine" width="40"><b> Perc.		</b></td>
   <td class="itDarkBlueLine" width="50"><b>Rateio		</b></td>
<td class="itDarkBlueLine" ><b>Descrição Rateio		</b></td>
 </tr>
 <tbody>  
<tr>
	<td  id= "rtitem" 	valign="top" ><b>%RT.ITEM%	</b></td>
	<td  id= "rtperc" 	valign="top" ><b>%RT.PERC% 	</b></td>
	<td  id= "rtrat" 		valign="top" ><b>%RT.RATEIO% </b></td>
	<td  id= "rtdesrat" 	valign="top" ><b>%RT.DESRAT% </b></td>
</tr>
 </tbody>  
</table>

 

Código javascript onde é incluido as linhas dinamicamente:

 

if (parseInt(cItmSol) == parseInt(cItmRat)){
				//Array recebe os itens de cada rateio
				aItmRat = aRateio[nXI].split(";")
				//Bloco de variaveis para incluir a linha do rateio dinamicamente
				var local=document.getElementById('tabrateio');  
				var tblBody = local.tBodies[0];  
				var newRow = tblBody.insertRow(-1);  
				var newCell0 = newRow.insertCell(0);  
				var newCell1 = newRow.insertCell(1);
				var newCell2 = newRow.insertCell(2);
				var newCell3 = newRow.insertCell(3);
				//Imprime a tabela de rateio
				newCell0.innerHTML = '<td class="itDarkBlueLine" > '+aItmRat[1]+' </td>';  
				newCell1.innerHTML = '<td class="itDarkBlueLine" > '+aItmRat[2]+'%'+' </td>'; 
				newCell2.innerHTML = '<td class="itDarkBlueLine" > '+aItmRat[3]+' </td>';
				newCell3.innerHTML = '<td class="itDarkBlueLine" > '+aItmRat[4]+' </td>';
			}

 

CSS:

 

.itDarkBlueLine {
FONT-SIZE: 12px;
COLOR: #ffffff;
FONT-FAMILY: Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
background-image:url(http://gps.totvs.com/workflow/bg_tablewf.gif);
background-position:bottom;
background-repeat:repeat-x;
background-color:#A4C2DE;
border:none;
}

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O erro está aqui:

var newCell0 = newRow.insertCell(0);  
newCell0.innerHTML = '<td class="itDarkBlueLine" > '+aItmRat[1]+' </td>';

 

o correto é o seguinte:

newCell0.className ='itDarkBlueLine';
newCell0.innerHTML = aItmRat[1];

entendeu ?

depois de fazer o insertCell(), não tem sentido você fazer um .innerHTML com a tag <td>.

 

Exemplo de teste que fiz:

<html>
<head>
<script type="text/javascript">
window.onload = function(){

document.getElementById('btn').onclick = function(){



	var local = document.getElementById('tabrateio');


	var tblBody = local.tBodies[0];  
	var newRow = tblBody.insertRow(-1);


  		var newCell0 = newRow.insertCell(0);
	var newCell1 = newRow.insertCell(1);
	//Imprime a tabela de rateio
	newCell0.className ='itDarkBlueLine';
	newCell0.innerHTML = 'newCell0';

	newCell1.className ='itDarkBlueLine';
	newCell1.innerHTML = 'newCell1';
}
}
</script>
<style type="text/css">
.itDarkBlueLine {
font-size: 12px;
color: #ffffff;
font-family:  Arial, Helvetica, sans-serif;
text-decoration: none;
background-color:#f0f;
border:none;
}
</style>
</head>
<body>
<table id="tabrateio" width="100%" border="0" align="center" cellpadding="1" cellspacing="0" bgcolor="#A4C2DE"> 
  <tr>
   <th class="itDarkBlueLine" width="20">Item</th>
   <th class="itDarkBlueLine" width="40">Perc.</th>
   <th class="itDarkBlueLine" width="50">Rateio</th>
<th class="itDarkBlueLine">Descrição Rateio</th>
 </tr>
 <tbody>  
       <tr>
               <th id="rtitem" valign="top">%RT.ITEM%</th>
               <th id="rtperc" valign="top">%RT.PERC%</th>
               <th id="rtrat" valign="top">%RT.RATEIO%</th>
               <th id="rtdesrat" valign="top">%RT.DESRAT%</th>
       </tr>
 </tbody>  
</table>
<input type="button" value="Clique para Inserir TDs" id="btn" />
</body>
</html>

 

 

[]s! :lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

dinhografo    0

dinhografo
Postado

Cara eu tive uma bronca dessas faz algum tempo, eu resolvi com a função delegate do jQuery mas para o seu caso é só buscar a refencia do que o delegate do jQuery faz em javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito