Risposte:
Hai due modi per farlo:
Utilizzando javascript:
<tr onclick="document.location = 'links.html';">
Utilizzando ancore:
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>
Ho realizzato il secondo lavoro utilizzando:
table tr td a {
display:block;
height:100%;
width:100%;
}
Per eliminare lo spazio morto tra le colonne:
table tr td {
padding-left: 0;
padding-right: 0;
}
Ecco una semplice demo del secondo esempio: DEMO
Mi sono creato una funzione jquery personalizzata:
<tr data-href="site.com/whatever">
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
Facile e perfetto per me. Spero che ti aiuti.
(So che OP vuole solo CSS e HTML, ma considera jQuery)
D'accordo con Matt Kantor utilizzando data attr. Risposta modificata sopra
data-href
o somesuch.
<table class='tr_link' >
e .tr_link{cursor:pointer}
inviala in CSS per un miglior utilizzo.
tr[data-href] { cursor: pointer }
ai tuoi fogli di stile
Se utilizzi un browser che lo supporta, puoi utilizzare CSS per trasformare il <a>
in una riga di tabella:
.table-row { display: table-row; }
.table-cell { display: table-cell; }
<div style="display: table;">
<a href="..." class="table-row">
<span class="table-cell">This is a TD... ish...</span>
</a>
</div>
Ovviamente, sei limitato a non inserire elementi di blocco all'interno del file <a>
. Inoltre non puoi mescolarlo con un normale<table>
Se si deve usare un tavolo, si può mettere un link in ciascuna cella della tabella:
<table>
<tbody>
<tr>
<td><a href="person1.html">John Smith</a></td>
<td><a href="person1.html">123 Fake St</a></td>
<td><a href="person1.html">90210</a></td>
</tr>
<tr>
<td><a href="person2.html">Peter Nguyen</a></td>
<td><a href="person2.html">456 Elm Ave</a></td>
<td><a href="person2.html">90210</a></td>
</tr>
</tbody>
</table>
E fai in modo che i collegamenti riempiano tutte le celle:
table tbody tr td a {
display: block;
width: 100%;
height: 100%;
}
Se sei in grado di utilizzare <div>
s invece di una tabella, il tuo HTML può essere molto più semplice e non otterrai "spazi vuoti" nei collegamenti, tra le celle della tabella:
<div class="myTable">
<a href="person1.html">
<span>John Smith</span>
<span>123 Fake St</span>
<span>90210</span>
</a>
<a href="person2.html">
<span>Peter Nguyen</span>
<span>456 Elm Ave</span>
<span>90210</span>
</a>
</div>
Ecco il CSS che accompagna il <div>
metodo:
.myTable {
display: table;
}
.myTable a {
display: table-row;
}
.myTable a span {
display: table-cell;
padding: 2px; /* this line not really needed */
}
Il modo usuale è assegnare un po 'di JavaScript onClick
all'attributo TR
dell'elemento.
Se non puoi usare JavaScript, devi usare un trucco:
Aggiungi lo stesso collegamento a ciascuna TD
delle stesse righe (il collegamento deve essere l'elemento più esterno nella cella).
Trasforma i link in elementi di blocco: a { display: block; width: 100%; height: 100%; }
Quest'ultimo costringerà il collegamento a riempire l'intera cella, quindi facendo clic ovunque verrà richiamato il collegamento.
Non puoi racchiudere un <td>
elemento con un <a>
tag, ma puoi realizzare funzionalità simili utilizzando l' onclick
evento per chiamare una funzione. Un esempio si trova qui , qualcosa di simile a questa funzione:
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
E aggiungilo alla tua tabella in questo modo:
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
La risposta di sirwilliam mi sta meglio. Ho migliorato il Javascript con il supporto per i tasti di scelta rapida Ctrl + LeftClick (apre la pagina in una nuova scheda). L'evento ctrlKey
è utilizzato dai PC, metaKey
dal Mac.
Javascript
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
window.open(url, '_blank');
window.focus();
}
else if(click == 1){
window.location.href = url;
}
return true;
}
});
Esempio
So che questa domanda ha già una risposta, ma non mi piace ancora nessuna soluzione in questa pagina. Per le persone che usano JQuery ho creato una soluzione finale che ti consente di dare alla riga della tabella quasi lo stesso comportamento del <a>
tag.
Questa è la mia soluzione:
jQuery Puoi aggiungerlo ad esempio a un file javascript standard incluso
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 1){
window.location.href = url;
}
else if(click == 2){
window.open(url, '_blank');
window.focus();
}
return true;
}
});
HTML Ora puoi usarlo su qualsiasi <tr>
elemento all'interno del tuo HTML
<tr url="example.com">
<td>value</td>
<td>value</td>
<td>value</td>
<tr>
document.querySelector('tr[url]').addEventListener("mousedown", function(e){ var click = e.which; var url = this.getAttribute("url"); if(url){ if(click == 1){ window.location.href = url; } else if(click == 2){ window.open(url, '_blank'); window.focus(); } return true; } });
Quando voglio simulare un <tr>
con un link ma rispettando gli standard html, lo faccio.
HTML:
<table>
<tr class="trLink">
<td>
<a href="#">Something</a>
</td>
</tr>
</table>
CSS:
tr.trLink {
cursor: pointer;
}
tr.trLink:hover {
/*TR-HOVER-STYLES*/
}
tr.trLink a{
display: block;
height: 100%;
width: 100%;
}
tr.trLink:hover a{
/*LINK-HOVER-STYLES*/
}
In questo modo, quando qualcuno va con il mouse su un TR, tutta la riga (e questo link) assume lo stile hover e non può vedere che ci sono più link.
La speranza può aiutare qualcuno.
Violino QUI
//Style
.trlink {
color:blue;
}
.trlink:hover {
color:red;
}
<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>
Forse qualcosa del genere? Anche se usa JS, ma questo è l'unico modo per rendere una riga (tr) cliccabile.
A meno che tu non abbia una singola cella con un tag di ancoraggio che riempie l'intera cella.
E poi, non dovresti comunque usare un tavolo.
Dopo aver letto questo thread e alcuni altri, ho trovato la seguente soluzione in javascript:
function trs_makelinks(trs) {
for (var i = 0; i < trs.length; ++i) {
if (trs[i].getAttribute("href") != undefined) {
var tr = trs[i];
tr.onclick = function () { window.location.href = this.getAttribute("href"); };
tr.onkeydown = function (e) {
var e = e || window.event;
if ((e.keyCode === 13) || (e.keyCode === 32)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
this.click();
}
};
tr.role = "button";
tr.tabIndex = 0;
tr.style.cursor = "pointer";
}
}
}
/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));
Per usarlo mettere il href in tr / td / esimo che il desiderio di essere cliccabile come: <tr href="http://stackoverflow.com">
. E assicurati che lo script sopra venga eseguito dopo che l'elemento tr è stato creato (dal suo posizionamento o utilizzando i gestori di eventi).
Lo svantaggio è che non farà sì che i TR si comportino come collegamenti come con i div con Modifica: ho fatto funzionare la navigazione da tastiera impostando onkeydown, role e tabIndex, puoi rimuovere quella parte se è necessario solo il mouse. Tuttavia, non mostreranno l'URL nella barra di stato al passaggio del mouse.display: table;
, e non saranno selezionabili da tastiera o avranno testo di stato.
Puoi modellare in modo specifico i TR dei link con il selettore CSS "tr [href]".
Ho un altro modo. Soprattutto se devi pubblicare dati usando jQuery
$(document).on('click', '#tablename tbody tr', function()
{
var test="something";
$.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){
window.location.href = "http://somepage";
});
});
Imposta variabile imposta le variabili nelle SESSIONI che la pagina che stai per raggiungere può leggere e su cui agire.
Mi piacerebbe davvero un modo per postare direttamente su una finestra, ma non credo sia possibile.
Puoi aggiungere un tag A alla riga?
<tr><td>
<a href="./link.htm"></a>
</td></tr>
È questo quello che stai chiedendo?