[resolvido] Colocar link (href) em linha de <table>

20 respostas
D

galera,

tem como eu colocar um href para que uma linha completa de uma

seja ‘clicável’? Tipo, no email (gmail no caso) qqer lugar na linha q vc clicar,
vai abrir o email…

Outra coisa, como faria para colocar tudo em negrito? (vou ter que colocar coluna por coluna, ou tem como fazer na linah inteira)?

20 Respostas

D

vc pode colocar um id na tr e capturar o evento do clique com jQuery, isso é uma ideia nunca tentei fazer, mas sei que com jQuery da pra vc adicionar evento de clique em qualquer tag html

E

tente algo tipo

<tr><a href><b>...trecos da linha...</a></b></tr>

Não lembro se negrito é b e nao sei se da pra fazer isso, mas vai que funfa. :slight_smile:

D
$('#idTr').bind('click', function() {
  alert("Linha foi clicada");
});
D

Erick , vlw pela resposta.
Então, já tentei nao funcionou.

Danilo, boa ideia cara…
vou testar depois… vou ver um filme com minha noiva…
não vou conseguir dormir hoje sem testar antes.

e para colocar em negrito, teria ideia? :slight_smile:
vlwww
abração

D

pra colocar em negrito, acho que vc poderia usar css

E

Dei uma pesquisada e achei isso:

<table>
 <tr onclick="location.href = 'http://www.site.com';" style="cursor: hand;">
  <td>Texto 1</td>
  <td>Texto 2</td>
 </tr>
</table>
D

então, só o click nao resolve…

preciso pegar um valor de uma das colunas tbem…
estou tentando emitar a parada do email…

vc clica na linha e ele abre o email referente a linha correto? :slight_smile:

sobre o negrito, qro colocar os emails nao lidos em negrito (q nem todo email por ai faz)

D

ah… na construção da tabela eu nao tenho uma coluna com codigo…
esqueci desse detalhe O.o’

A

Retendo-se no que deve ser retido e aproveitando o javascript que já está sendo utilizado:

CSS (é muito importante estudar isso, não lance tudo nos elementos do html), colocando um efeito de hover no tr e uma mão em cima do link:

table#tableTrClick tr.trClick{background: #000; color: #fff; cursor: pointer;} table#tableTrClick tr.trClick:hover{background: green; color: #fff; font-weight: bold;}

a tabela como fica:

&lt;table id="tableTrClick"&gt; &lt;thead&gt;...&lt;/thead&gt; &lt;tbody&gt; &lt;tr class="trClick" rel="idDoEmail"&gt;&lt;td&gt;linha1&lt;/td&gt;&lt;/tr&gt; &lt;tr class="trClick" rel="idDoEmail"&gt;&lt;td&gt;linha2&lt;/td&gt;&lt;/tr&gt; &lt;tr class="trClick" rel="idDoEmail"&gt;&lt;td&gt;linha3&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;

no jquery, o clique na linha:

$("tr.trClick").click(function(){ $this = $(this); //isso aqui é para não perder o foco do elemento $idDoEmail = $this.attr("rel"); //esse é o id do elemento que vai ser utilizado alert(idDoEmail); })

D

cara
não sei o que eu fiz de errado, mas não deu…

Modifiquei o style.css e colei o que vc falou…
aí na pagina da table fiz:

<table class="datatable" id="tableTrClick">
	<thead>
		<tr>
			<th class="column-action"></th>
			<th><fmt:message key="menu.item.mensagem.remetente" /></th>
			<th><fmt:message key="titulo" /></th>
			<th><fmt:message key="data" /></th>
		</tr>
	</thead>
	<tbody>
		<c:forEach items="${itens }" var="msg">

			<tr class="trClick" rel="${msg.codigo }">
//...

e:

<script type="text/javascript">
$("tr.trClick").click(function(){
	   $this = $(this); //isso aqui é para não perder o foco do elemento
	   $idDoEmail = $this.attr("rel"); //esse é o id do elemento que vai ser utilizado
	   alert(idDoEmail);   
	})
</script>

não deu certo :frowning:

D

PS: inspecionei elemento com o firebug… esta certinho, o negocio do ID no rel…

D

opa… troquei o $ pelo var no idDoEmail e funcionou …
legall
obrigadoooo cara!

D

cara, como faço pro jquery executar o link…
na verdade é um get que ele tem que fazer…

<a class="view" id="clickedTr" href="<c:url value="/portalProfessor/mensagem/visualizar/${msg.codigo}" />"><fmt:message key="action.edit" /></a>

Preicso executar esse ahref com o idDoEmail que foi pegado no javascript…
pesquisei e encontrei:

document.getElementById('link').click();

porém preciso passar o id ali… como q faz galera?

A

Não entendi muito bem o que você quis dizer, você quer capturar o link e o id da tr e executar uma ação?

D

é pq eu havia criado um botãozin pra o cara clicar e executar um ahref… Fiz isso pq nao havia conseguido fazer o click na linha funcionar.
Graças a sua ajuda e do pessoal, isto foi possível agora.

Agora quero transferir o “a href” do clico do botão, para o click na linha.
vai abrir outra pagina que irá visualizar o email …

A

Se você tem os 2 valores, você já pode compor a sua href, caso não tenha, é só fazer um hack em cima do rel, coloca por exemplo:

rel=“idDoEmail,<c:url value=”/portalProfessor/mensagem/visualizar/${msg.codigo}" />"

e no seu código você quebra o rel:

&lt;script type="text/javascript"&gt; $("tr.trClick").click(function(){ $this = $(this); //isso aqui é para não perder o foco do elemento $idDoEmail = $this.attr("rel").split(",")[0]; //esse é o id do elemento que vai ser utilizado $url = $this.attr("rel").split(",")[1]; //esse é o id do elemento que vai ser utilizado alert($idDoEmail + " - " + $url); }) &lt;/script&gt;

D

Não , não é isso…

Tipo assim,
o cara clica na linha e abre o email, correto?
preciso que abra o email…

depois que o cara executa eu preciso abrir o seguinte link:

"/portalProfessor/mensagem/visualizar/${msg.codigo}"

onde o ${msg.codigo} será o idDoEmail :slight_smile:
Entendeu?

A

entendi, o problema é somente com javascript então:

&lt;script type="text/javascript"&gt;    
   $("tr.trClick").click(function(){    
       $this = $(this);
       $idDoEmail = $this.attr("rel").split(",")[0];
       window.location = "/NomeDoTeuProjeto/portalProfessor/mensagem/visualizar/" + $idDoEmail; //aqui redireciona
    })    
&lt;/script&gt;
D

funcionou :slight_smile:

tudo blz… só o css q não…
vou quebrar a cabeça no motivo dele nao funcionar e logo posto aqui e [resolvo] o post…

muito obrigado cara. Ajudou muito. :slight_smile:
100% uhdsauhds

abração

D

obrigado pela ajuda. :slight_smile:
abraço

Criado 23 de junho de 2012
Ultima resposta 25 de jun. de 2012
Respostas 20
Participantes 4