Ir para conteúdo

POWERED BY:

Arquivado

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

brissolare

Tabela não seleciona a linha inteira só uma parte

Por , em Desenvolvimento frontend

Recommended Posts

brissolare    0

brissolare
Postado

Fala Pessoal,

 

Tenho uma tabela que tem 7 colunas ...

O que tem dentro da tabela são links para direcionar para o mesmo lugar...idenpendente da coluna que o usuário clicar...

O problema é que cada coluna da tabela é um link e passo o mouse somente no texto e depois ele some...nao pega a linha inteira independente de onde eu passo o mouse na tabela...

 

peguei um tutorial no http://maujor.com/tutorial/apoio_cortd/apoio4.html

 

o fundo até fica selecionado mas de uma coluna somente a linha inteira nao <_<

 

Segue um exemplo da forma como estou fazendo a tabela

 

                                    "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">" +
                                    "<tr>" +
                                    "<td><table bgcolor=\"#507CD1\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">" +
                                    "<tr height=\"18\" class=\"corTabelaTexto2\">" +
                                    "<td width=\"1%\"> </td>" +
                                    "<td width=\"9%\">Vencimento</td>" +
                                    "<td width=\"6%\">Valor</td>" +
                                    "<td width=\"35%\">Fornecedor</td>" +
                                    "<td width=\"6%\">Parcela</td>" +
                                    "<td width=\"15%\">Documento</td>" +
                                    "<td width=\"8%\">Tipo</td>" +
                                    "<td width=\"10%\">Conta</td>" +
                                    "<td width=\"10%\">Centro C.</td>" +
                                    "<td width=\"1%\"> </td>" +
                                    "</tr>";
                                    "<tr bgcolor=" + CorColuna + " height=\"20\">" +
                                    "<td> </td>" +
                                    "<td><a href=\"visualizaParcela.aspx?id=" + idTitulo + "&pa=" + idParcela + "\"><font color=" + corlink + ">" + vencimento + "</font></a></td>" +
                                    "<td><a href=\"visualizaParcela.aspx?id=" + idTitulo + "&pa=" + idParcela + "\"><font color=" + corlink + ">" + numeroTitulo + "</font></a></td>" +
                                    "<td><a href=\"visualizaParcela.aspx?id=" + idTitulo + "&pa=" + idParcela + "\"><font color=" + corlink + ">" + valorParcela + "</font></a></td>" +
                                    "<td><a href=\"visualizaParcela.aspx?id=" + idTitulo + "&pa=" + idParcela + "\"><font color=" + corlink + ">" + fornecedor + "</font></a></td>" +
                                    "<td><a href=\"visualizaParcela.aspx?id=" + idTitulo + "&pa=" + idParcela + "\"><font color=" + corlink + ">" + parcela + "</font></a></td>" +
                                    "<td><a href=\"visualizaParcela.aspx?id=" + idTitulo + "&pa=" + idParcela + "\"><font color=" + corlink + ">" + tipo + "</font></a></td>" +
                                    "<td> </td>" +
                                    "</tr>";
                                    "</table></td>" +
                                   "</tr>" +
                                   "</table>";

Para selecionar com o fundo e em qualquer parte da célula coloco:

 

"<td><a class=\"link\" href=\"visualizaParcela.aspx?id=" + idTitulo + "&pa=" + idParcela + "\"><font color=" + corlink + ">" + fornecedor + "</font></a></td>" +

No css coloco o seguinte:

 

a.linque {
 display:block;
 font: 12px Arial, Helvetica, sans-serif;
 color:#00f;
 padding:2px 6px;
 text-decoration:none
 }
 
a.linque:hover {
 color:#fff;
 background-color:#000;
 }

mesmo assim...seleciona só uma coluna não a linha toda...

Alguem pode me ajudar...

 

Valeu galera abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

a linha é o TR

TD é a coluna mesmo.

 

faça no TR oque você quer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brissolare    0

brissolare
Postado

a linha é o TR

TD é a coluna mesmo.

 

faça no TR oque você quer.

 

Fala Bruno, fiz o que me falou...os links funcionam, só que o background fica antes da tabela..fiz vou passar o codigo pra você ver....você vai ver que se subir o mouse depois do primeiro link o background está fora da linha...na verdade parece estár fora da tabela...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="teste.aspx.cs" Inherits="financeiro_contaspagar_teste" %>

<!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 runat="server">
    <title></title>
<style type="text/css">
body { 
  color:#039;
  background:#f6faff;
  font: 12px Arial, Helvetica, sans-serif;
  }
  
a.linque {
 display:block;
 font: 12px Arial, Helvetica, sans-serif;
 color:#00f;
 padding:2px 6px;
 text-decoration:none
 }
 
a.linque:hover {
 color:#fff;
 background-color:#000;
 }
table { border-collapse:collapse; }
table tr td {
  width:100px;
  border:1px solid #ccc;
  background:#ffe;
  }
</style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 100%;">
            <tr><a class="linque" href=AutocompleteDataCentroCusto.ashx>
                <td>
                   teste
                </td>
                <td>
                    teste
                </td>
                <td>
                    teste
                </td>
            </a></tr>
            <tr><a class="linque" href=AutocompleteDataCentroCusto.ashx>
                <td>
                    teste
                </td>
                <td>
                     
                </td>
                <td>
                     
                </td>
            </a></tr>
            <tr><a class="linque" href=AutocompleteDataCentroCusto.ashx>
                <td>
                   teste
                </td>
                <td>
                     
                </td>
                <td>
                     
                </td>
            </a></tr>
        </table>
    </div>
    </form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

O link deve vir DENTRO DE <TD> e não de <tr> como foi feito.

 

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

 

tr:hover { background: #000; color: #fff; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

brissolare    0

brissolare
Postado

Fala Evandro!!! Dessa forma que me passou o fundo fica do jeito que eu quero...só que se eu coloco o link no td eu ainda tenho que clicar sobre o link e o que eu quero é clicar sobre qualquer parte da linha, mesmo entre o espaço de uma coluna para outra e ser redirecionada para outra pagina....

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ai você terá que usar javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brissolare    0

brissolare
Postado

ai você terá que usar javascript.

 

bom...ai ferrou...rs..nao manjo nada de javascript...vou ver o que eu faço...mas vai ter que ficar sem isso por enquanto...

 

me fala uma coisa só..a dica que o Evandro deu...

 

tr:hover { background: #000; color: #fff; }

tem como eu colocar da segunda linha da minha tabela pra baixo??

ai eu uso o link mesmo mas mudando a cor do fundo da linha....depois quando estiver um conhecimento melhor de js e css tento mudar..

valeu galera abraço...

Compartilhar este post

Link para o post
Compartilhar em outros sites

brissolare    0

brissolare
Postado 

tr + tr:hover { background: #000; color: #fff; }
Fala Galera!!! Estamos quase conseguindo, utilizei as dicas do William e do Evandro e do Link do site...vou postar o código...nao precisou de js...rs...está quase lá...o problema é que a primeira linha que contem informação não fica grifada igual as demais...

Outra coisa é o link que só na coluna onde estou passando mouse fica branco no resto não....Segue abaixo o código

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="teste2.aspx.cs" Inherits="financeiro_contaspagar_teste2" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        
    body 
{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom:0px;
    font-family: Verdana, Geneva, Sans-Serif;
    font-size: 12px;
    height: 100%;
    width:100%;
    overflow:hidden;
}    
    .corTabelaTexto2{
	color:White;
	font-weight:bold;
}
.teste + tr:hover  
 {
     background-color:#7C9EDC;
     color: White;
 }
 a.linkRelatirio {
 display:block;
 color: Black;
 text-decoration:none

 }
 
a.linkRelatirio:hover {
   color: White;
   background-color:#7C9EDC;

 }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>
    <table bgcolor="#507CD1" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr height="20" class="corTabelaTexto2">
    <td width="1%"> </td>
    <td width="8%">Vencimento</td>
    <td width="9%">Número</td>
    <td width="9%">Valor</td>
    <td width="37%">Fornecedor</td>
    <td width="8%">Parcela</td>
    <td width="9%">Tipo</td>
    <td width=10%>Conta</td>
    <td width=8%>Status</td>
    <td width=1%> </td>
    </tr>
    <tr bgcolor="white" height="20" class="teste">
    <td> </td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">01/12/2010</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">568951</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">5.000.96</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">TESTE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">1/1</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">CHEQUE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">N/D</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">ABERTO</a></td>
    <td> </td>
    </tr>
    <tr bgcolor="white" height="20" class="teste">
    <td> </td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">01/12/2010</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">568951</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">5.000.96</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">TESTE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">1/1</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">CHEQUE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">N/D</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">ABERTO</a></td>
    <td> </td>
    </tr>
    <tr bgcolor="white" height="20" class="teste">
    <td> </td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">01/12/2010</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">568951</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">5.000.96</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">TESTE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">1/1</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">CHEQUE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">N/D</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">ABERTO</a></td>
    <td> </td>
    </tr>
    <tr bgcolor="white" height="20" class="teste">
    <td> </td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">01/12/2010</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">568951</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">5.000.96</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">TESTE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">1/1</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">CHEQUE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">N/D</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">ABERTO</a></td>
    <td> </td>
    </tr><tr bgcolor="white" height="20" class="teste">
    <td> </td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">01/12/2010</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">568951</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">5.000.96</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">TESTE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">1/1</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">CHEQUE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">N/D</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">ABERTO</a></td>
    <td> </td>
    </tr><tr bgcolor="white" height="20" class="teste">
    <td> </td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">01/12/2010</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">568951</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">5.000.96</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">TESTE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">1/1</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">CHEQUE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">N/D</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">ABERTO</a></td>
    <td> </td>
    </tr><tr bgcolor="white" height="20" class="teste">
    <td> </td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">01/12/2010</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">568951</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">5.000.96</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">TESTE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">1/1</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">CHEQUE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">N/D</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">ABERTO</a></td>
    <td> </td>
    </tr><tr bgcolor="white" height="20" class="teste">
    <td> </td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">01/12/2010</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">568951</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">5.000.96</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">TESTE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">1/1</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">CHEQUE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">N/D</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">ABERTO</a></td>
    <td> </td>
    </tr><tr bgcolor="white" height="20" class="teste">
    <td> </td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">01/12/2010</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">568951</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">5.000.96</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">TESTE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">1/1</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">CHEQUE</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">N/D</a></td>
    <td><a class="linkRelatirio" href="visualizaParcela.aspx?id=1 \">ABERTO</a></td>
    <td> </td>
    </tr>
    </div>
    </form>
</body>
</html>

Mais uma vez obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Pelo amor de Deus!!!

 

Tabela dentro de tabela???

 

Vamos dar uma arrumada nisso!

 

<table cellpadding="0" cellspacing="0" border="0">
<col width="9%" />
<col width="9%" />
<col width="9%" />
<col width="37%" />
<col width="8%" />
<col width="9%" />
<col width="10%" />
<col width="9%" />
<thead>
	<tr>
		<th>Vencimento</th>
		<th>Número</th>
		<th>Valor</th>
		<th>Fornecedor</th>
		<th>Parcela</th>
		<th>Tipo</th>
		<th>Conta</th>
		<th>Status</th>
	</tr>
</thead>
<tfoot>
	<tr>
		<th>Vencimento</th>
		<th>Número</th>
		<th>Valor</th>
		<th>Fornecedor</th>
		<th>Parcela</th>
		<th>Tipo</th>
		<th>Conta</th>
		<th>Status</th>
	</tr>
</tfoot>
<tbody id="relatorios">
	<tr>
		<td>01/12/2010</td>
		<td>568951</td>
		<td>5.000.96</td>
		<td>TESTE</td>
		<td>1/1</td>
		<td>CHEQUE</td>
		<td>N/D</td>
		<td>ABERTO</td>
	</tr>
	<tr>
		<td>01/12/2010</td>
		<td>568951</td>
		<td>5.000.96</td>
		<td>TESTE</td>
		<td>1/1</td>
		<td>CHEQUE</td>
		<td>N/D</td>
		<td>ABERTO</td>
	</tr>
	<tr>
		<td>01/12/2010</td>
		<td>568951</td>
		<td>5.000.96</td>
		<td>TESTE</td>
		<td>1/1</td>
		<td>CHEQUE</td>
		<td>N/D</td>
		<td>ABERTO</td>
	</tr>
	<tr>
		<td>01/12/2010</td>
		<td>568951</td>
		<td>5.000.96</td>
		<td>TESTE</td>
		<td>1/1</td>
		<td>CHEQUE</td>
		<td>N/D</td>
		<td>ABERTO</td>
	</tr>
	<tr>
		<td>01/12/2010</td>
		<td>568951</td>
		<td>5.000.96</td>
		<td>TESTE</td>
		<td>1/1</td>
		<td>CHEQUE</td>
		<td>N/D</td>
		<td>ABERTO</td>
	</tr>
</tbody>
</table>

 

table {
	border-collapse: collapse;
}

table td {
	border: 1px solid #000;
	padding: 2px;
}

#relatorios tr:hover {
	background: #000;
	color: #fff;
	cursor: pointer;
}

var relatorios = document.getElementById('relatorios').getElementsByTagName('tr');
for(var i = 0, ln = relatorios.length; i < ln; i++) (function(linha){
	var id = linha.getElementsByTagName('td').item(1);
	linha.onclick = function(){
		document.location = 'visualizaParcela.aspx?id=' + id.innerHTML;
	}
})(relatorios.item(i));

Compartilhar este post

Link para o post
Compartilhar em outros sites

brissolare    0

brissolare
Postado

Fala Evandro....o puxão de orelha foi merecido...essa tabela é dos tempos de inicante em .net com html e css junto sabe...não que tenha melhorado muito...rs...mas agora consigo centralizar as coisas com um único elemento...agora que me falou que reparei nisso...

 

vou pegar esse exemplo e colocar no meu código, assim que tiver pronto posto aqui...

 

só uma coisa no firefox funcionou sem nenhum problema no IE deu o seguinte

 

Linha: 26

Erro: 'null' é nulo ou não é um objeto

 

Linha 26: 

             var relatorios = document.getElementById('relatorios').getElementsByTagName('tr');

Assim que tiver pronto eu posto...mais uma vez obrigado

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Você provavelmente está colocando o Javascript de maneira crua dentro das tags <head>

 

Será necessário, ou mover o javascript para o final do documento, antes de </body>, ou colocar o bloco de código em um evento:

 

<div class="rodape">Minha empresa. Todos os direitos reservados.</div>
        <script type="text/javascript">/* Meu JS vem aqui */</script>
    </body>
</html>

ou

 

<head>
        <title>Minha página</title>
        <script type="text/javascript">
function acoes() {
/* meu JS vem aqui */
}

try { window.addEventListener('load',acoes,false); }
catch(e) { window.attachEvent('onload',acoes); }
        </script>
    </head>
    <body>

Compartilhar este post

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

Informação importante

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

  Aceito