Como colocar o efeito “cor sim” e “cor não” em linhas da tabela

lezão · Maio 29, 2014

Galera estou precisando de um codigo q faça essa função

Giovani · Maio 29, 2014

Crie uma classe para a tr e adicione uma cor de fundo.

<tr>
   <td> ... </td>
   <td> ... </td>
</tr>

<tr class="suaclasse">
   <td> ... </td>
   <td> ... </td>
</tr>

<tr>
   <td> ... </td>
   <td> ... </td>
</tr>

lezão · Maio 29, 2014

estou usando esse aki em java

$("#tbcor1 tr:odd").css("background-color", "#bbbbff");

mas naun fuciona....

reebr · Maio 29, 2014

$( '#tbcor1 tr:nth-child(odd)' ).css( "...", "..." );

lezão · Maio 29, 2014

oq significa esses pontinhos

.css( "...". "..." );

????????????

vejam como estou fazendo deve haver algo errado ?????

<script type="text/javascript">
$("#tbcor1 tr:odd").css("background-color", "#bbbbff");
</script>

</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

reebr · Maio 29, 2014

:huh: o seu código óras...

$( '#tbcor1 tr:nth-child(odd)' ).css( "background-color", "#bbbbff" );

Ficou melhor?

O foco era trocar isso " #tbcor1 tr:odd " por isso " #tbcor1 tr:nth-child(odd) ". :thumbsup:

__________________________________________________

Agora que editou o tópico e postou o código. É realmente necessário fazer esse efeito com Javascript?

<head>
    <style>
        table tr:nth-child(odd) {
            background-color: #bbbbff;
        }
    </style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr class="btcor1">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

lezão · Maio 29, 2014

viu como eu fiz acima e naun da certo.... :(

reebr · Maio 29, 2014

:huh: ... ... ... melhor postar o código de como você tentou.

lezão · Maio 29, 2014

é isso mesmo deu certo, RNXN vlw ......

Que Deus ilumini seus caminhos....

lezão · Maio 29, 2014

Cara apareceu um erro agora veja como estou usando

        table tr:nth-child(odd) {
            background-color: #bbbbff;
        }
		table tr:nth-child(even){
			background-color: #000000;
		}

html

<%	While Not rs.EOF AND x < rs.PageSize	
   	x = x + 1 
q = q + 1 
%>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><%=rs("id_Produto")%></td>
    <td> </td>
    <td> </td>
  </tr>
  </table>


      <%
  'Movendo para o proximo registro
  RS.MoveNext
  Wend
%>

ele naun coloca as cores corretamente ....

tinha q ficar

1 azul

2 preto

3 azul

4 preto

veja o link>> http://www.dedetinseto.com.br/site/painel/produtos/teste.asp

gabriel-costa · Maio 29, 2014

Olá Lezão, beleza?

Utiliza jQuery e faça o seguinte:

<script>
     $(function(){
        $('table tr:odd').addClass('outracor');
     })
</script>

E em CSS cria a classe:

.outracor { background: #ddd; }

Se isso não resolver, posta o código para que eu possa analisar. ok?

lezão · Maio 29, 2014

e qnd eu utilizo outra tabela pega a função nela tbm, ao invés de pegar a função apenas na tabela citada acima...

Eai Gabriel-Costa, blz vou postar como estou usando o seu post




<script>
     $(function(){
        $('table tr:odd').addClass('background:#bbbbff');
     })
</script>



<tr class="table"> 

    <td><%=rs("id_Produto")%></td>
    <td> </td>
    <td> </td>
 </tr>     <%
  'Movendo para o proximo registro
  RS.MoveNext
  Wend
%>
  </table>

oq eu estava usando em CSS esta postado acima....

Public2004 · Maio 29, 2014

Se for utilizar jQuery apenas para esta rotina, acho completamente desnecessário.

O uso do CSS3 seria elegante, mas existe o problemas com os IE's.

E já que está utilizando um laço de repetição, seria mais interessante utilizar uma classe específica para colorir a sua linha, bastando para isso adicionar um verificador a cada registro para então alternar os estilos.

Off. No seu loop é realmente necessário a repetição de toda a tabela em vez apenas da linha?

Att.

reebr · Maio 29, 2014

Você não precisa definir valores para os ímpares e pares. Somente um dos dois.

table tr {
   background: rgb(0,0,255); // azul
}

table tr:nth-child(odd) {
  background: #000; // preto
}

lezão · Maio 29, 2014

mas no Css qnd uso o codigo, posso usar apenas uma tabela se eu inseriri outra tabela para outras finalidades a função do codigo passa pra ela tbm....

reebr · Maio 29, 2014

Cara, dá uma class ou ID para cada tabela e aplica a regra.

lezão · Maio 29, 2014

aqui....

aqui >>>>>  <tr class="table"> 

    <td><%=rs("id_Produto")%></td>
    <td> </td>
    <td> </td>
 </tr>     <%
  'Movendo para o proximo registro
  RS.MoveNext
  Wend
%>
  </table>

gabriel-costa · Maio 29, 2014

e qnd eu utilizo outra tabela pega a função nela tbm, ao invés de pegar a função apenas na tabela citada acima...

Eai Gabriel-Costa, beleza vou postar como estou usando o seu post
<script>
     $(function(){
        $('table tr:odd').addClass('background:#bbbbff');
     })
</script>



<tr class="table"> 

    <td><%=rs("id_Produto")%></td>
    <td> </td>
    <td> </td>
 </tr>     <%
  'Movendo para o proximo registro
  RS.MoveNext
  Wend
%>
  </table>
oq eu estava usando em CSS esta postado acima....

A sua funçaõ jQuery acima está errada.

Quando se utiliza o .addClass() estamos adicionando uma classe o elemento, portanto somente é aceirto nome de classes.

Como eu disse anteriormente, você pode acrescentar dentro do seu código CSS uma classe com as estilizações da linha que irá ficar mais clara ou escura.

E com o jQuery, você acrescenta em cada linha, de 2 em 2, essa classe, com a função:

$(function(){

$('table tr:odd').addClass('outracor');

})

</script>

E sobre pegar em todas as outras tabelas, e só você criar uma classe ou id para a tabela que você quer que essa função seja executada, por exemplo:

HTML

<table id="teste">
      <tr>
          <td></td>
      </tr>

       <tr>
          <td></td>
      </tr>

      <tr>
          <td></td>
      </tr>
</table>

e o JS fica:

<script>
     $(function(){
        $('table#teste tr:odd').addClass('outracor');
     })
</script>

CSS

.outracor {
    background-color: #ddd;
}

reebr · Maio 29, 2014

<table class='table'>
    <!-- código da primeira tabela -->
</table>

<table class='outra-table'>
   <!-- código da segunda tabela -->
</table>

.table tr:nth-child(odd) {
    background: #000;
    color: #fff;
}

.outra-table tr:nth-child(odd) {
    background: rgb(0,0,255);
    color: #fff;
}

http://jsfiddle.net/rnxn/Vt9HG/1/

aqui....
aqui >>>>> <tr class="table">

<td><%=rs("id_Produto")%></td>

<td> </td>

<td> </td>

</tr> <%

'Movendo para o proximo registro

RS.MoveNext

Wend

%>

</table>

Então, se você já tem uma tabela com classe 'table', o que você precisa fazer para diferenciar ela das demais tabelas? Criar uma nova classe e atribuir a essa nova tabela, ou, um ID, para distinguir ela dessa que usa a classe 'table'.

É um dúvida bem básica, recomendo que leia sobre class, ID e seletores:

http://pt-br.html.net/tutorials/css/lesson7.php

http://www.maujor.com/tutorial/seletores-css3.php

lezão · Maio 30, 2014

tenta você fazer colocando ( class ou id ) para identificar a função , naun roda fica a mesma coisa....

codigo completo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>



<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
        tbcor1 tr:nth-child(odd) {
            background-color: #bbbbff;
        }
</style>
<head>

    
</head>
 
<body>
<% registros = 11
pagina = Request.QueryString("pagina") 
If pagina = "" Then 
pagina = 1 
End If 
 
'Efetuando a conexão com a base de dados criada ----------------------- 
Set conexao = Server.CreateObject("AdoDB.Connection") 
conexao.provider="Microsoft.Jet.OLEDB.4.0" 
conexao.connectionstring=Server.Mappath("bancodedados.mdb")
conexao.open 
 
Set rs = Server.Createobject("ADODB.RECORDSET") 
set rs.ActiveConnection = Conexao 
rs.CursorType = 3 
rs.PageSize = registros  
 
sql = "SELECT * FROM Produtos Order By Produto"
rs.Open sql 
If rs.EOF Then
Response.Write "<center><font face=Verdana size=2><b>Nenhum registro encontrado!</b><br><br><a href=javascript:history.back(-1)><font face=Verdana, Arial, Helvetica, sans-serif size=1>Voltar</font></a> </center></font>"


Else
rs.AbsolutePage = pagina
%>


<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <%	While Not rs.EOF AND x < rs.PageSize	
   	x = x + 1 
q = q + 1 
%>

<tr class="tbcor1"> 

    <td><%=rs("id_Produto")%></td>
    <td> </td>
    <td> </td>
 </tr>  
<%
  'Movendo para o proximo registro
  RS.MoveNext
  Wend
%>
</table>  
<%
		
		anterior = pagina - 1
proxima = pagina + 1
ultima = rs.PageCount
primeira = 1
ultm2 = FormatNumber(rs.PageCount - 1,0)
If pagina <> 1 Then
Response.Write "<b> <a href=teste.asp?pagina="&primeira&">« Anterior</a></b> "
End If
If pagina > 1 AND pagina <> 2 Then
Response.Write " <b>[ <a href=teste.asp?pagina="&anterior - 1&">"&anterior - 1&"</a> ]</b> "
End If
If pagina > 1 Then
Response.Write "<b>[ <a href=teste.asp?pagina="&anterior&">"&anterior&"</a> ]</b> "
End If
Response.Write "<b>[ "&pagina&" ]</b> "
If Not rs.EOF Then
Response.Write "<b>[ <a href=teste.asp?pagina="&proxima&">"&proxima&"</a> ]</b> "
End If
If Not rs.EOF AND pagina <> ultima AND pagina <> ultm2 Then
Response.Write "<b>[ <a href=teste.asp?pagina="&proxima + 1&">"&proxima + 1&"</a> ]</b> "
End If
If Not rs.EOF Then
Response.Write "<b><a href=teste.asp?pagina="&ultima&">Próxima »</a> </b> "
End If 

rs.Close
Set rs = Nothing  
End If %>
</body>
</html>

tente fazer rodar usando este codigo ......

Arquivado

Como colocar o efeito “cor sim” e “cor não” em linhas da tabela

Recommended Posts

lezão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

lezão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

reebr 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

lezão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

reebr 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

lezão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

reebr 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

lezão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lezão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabriel-costa 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

lezão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

reebr 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

lezão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

reebr 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

lezão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabriel-costa 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

reebr 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

lezão 0