Fare una riga di tabella (tr) cliccabile con jQuery (con un link href, e librarsi !?)

Question

Just a (si spera) domanda veloce, ho il seguente codice HTML:

<tr> 
<td><img src="img/icons/file_pdf.png"></td> 
<td><a href="../upload/1267473577.pdf">Bulletin 1st March 2010</a></td> 
<td>(01/03/10)</td> 
</tr> 

Idealmente mi' Mi piace un modo per afferrare il link href usando jQuery e fare in modo che, non importa dove si fa clic su quella particolare riga della tabella, vi porterà a quel link.

C'è un modo per farlo? Posso farlo tramite icky inline JavaScript come ultima risorsa, ma dopo aver scoperto jQuery mi piace l'idea di poterlo fare in modo pulito e discreto :-)

Answer 1

Supponendo che sia un collegamento "normale" (non un trigger Javascript) sarà sufficiente:

$("tr").click(function() { 
    window.location.href = $(this).find("a").attr("href"); 
}); 

Probabilmente vorrete comunicare questo comportamento all'utente in qualche modo. L'approccio minimo sarebbe cambiare il cursore mentre si posiziona il mouse sopra la riga.

Answer 2

Se si dispone di un altro collegamento all'interno della tabella, come un collegamento di eliminazione, è possibile utilizzare l'oggetto evento per verificare se l'utente ha fatto clic su quel particolare collegamento ed evitare il reindirizzamento.

Esempio HTML:

<tr title="http://path/to/download"> 
    <td><img src="img/icons/file_pdf.png"></td> 
    <td><a href="/path/to/delete">Delete</a></td> 
    <td>(01/03/10)</td> 
</tr> 

Esempio JavaScript:

$("tr").click(function(event) { 
    if(event.target.nodeName != "A"){ 
    window.location.href = $(this).attr("title"); 
    } 
}); 

Di solito i miei tavoli hanno una cella di azione con modificare ed eliminare, quindi utilizzare l'evento fila click per reindirizzare all'azione spettacolo.

Answer 3

Ho trovato questa soluzione per funzionare bene per me.

$('table tr').live("click",function(e){ 
    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){ 
     return; 
     } 
     alert('works'); 
});