Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
Sim, conheço o Firebug
O estilo está ok, utilizo ele pra outras tabelas
O problema é que não está hospedado ainda, tem mais alguma dica?
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.
Bruno, me passa seu e-mail, vou te mandar a pagina e ai você pode analisar melhor.
Aguardo e obrigado
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:
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
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:
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.
Valeu William, era isso mesmo, obrigado.
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.