html - riga della tabella come un collegamento


101

Non riesco a impostare la riga della mia tabella come collegamento a qualcosa. Posso usare solo css e html. Ho provato cose diverse da div in fila a qualcos'altro, ma non riesco ancora a farlo funzionare.

Risposte:


175

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


8
Poiché OP ha detto "solo css e html", presumo che l'accettazione fosse per la seconda risposta. Nota che se non hai border = 0 otterrai uno spazio di "collegamento mancante" tra le celle della tabella.
sistema PAUSA

1
IIRC le celle della tabella devono solo essere compresse, ma possono avere un bordo.
Esteban Küber,

5
Il tag <a> non consente altri elementi html al suo interno. Quindi, come possiamo collegare un'intera riga della tabella che ha più dati della tabella? Qualcosa del genere: <tr> <a href=""> <td>Text</td> <td> ..... </a> </tr> .. Non possiamo avere come questo ne?
Abimaran Kugathasan

4
Suggerirei di utilizzare "display: inline-block" invece di block. Con la visualizzazione a blocchi, ho scoperto che Chrome ignorava "l'altezza: 100%" e in realtà non rendeva selezionabile l'intera altezza del <td> se ci sono altri elementi nella stessa riga che hanno un'altezza maggiore. Rendendolo inline-block ha risolto il problema e anche un possibile problema correlato con il testo che veniva ritagliato all'interno degli elementi della tabella.
orrd

2
Anchors ha ancora spazio morto tra le colonne (testato con Google Chrome versione 40.0.2214.115 m)
Yuri

55

Mi sono creato una funzione jquery personalizzata:

html

<tr data-href="site.com/whatever">

jQuery

$('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)

modificare

D'accordo con Matt Kantor utilizzando data attr. Risposta modificata sopra


In realtà è piuttosto elegante. Mi chiedo se sia considerato html non valido per gli standard w3c.
Mahn

14
Userei data-hrefo somesuch.
Matt Kantor

2
Il collegamento JSFiddle porta a 404.
Flox

1
aggiungi una classe <table class='tr_link' >e .tr_link{cursor:pointer}inviala in CSS per un miglior utilizzo.
Bagova

6
Per aggiungere l'effetto mano al passaggio del mouse, aggiungi tr[data-href] { cursor: pointer }ai tuoi fogli di stile
OverCoder

27

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>


1
Ottima idea, grazie! Sembra funzionare su Opera 8.5 / , Firefox 0.8 / , IE8, iPhone Simulator / Safari / molto vecchio :)
biziclop

1
Questa dovrebbe essere la tecnica che gli sviluppatori cercano di adottare dato che le tabelle CSS sono supportate da tutti i browser attuali: caniuse.com/#feat=css-table L'unico problema è che non posso usarlo con Bootstrap! : '(
shangxiao

13

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 */
}

1
Se vuoi mostrare dati tabulari, usa sempre una tabella. L'uso di una raccolta di div e intervalli è semanticamente scorretto, renderà i tuoi contenuti difficili da leggere se perdi il CSS e inaccessibili per chi usa uno screen reader.
gulima

12

Il modo usuale è assegnare un po 'di JavaScript onClickall'attributo TRdell'elemento.

Se non puoi usare JavaScript, devi usare un trucco:

  1. Aggiungi lo stesso collegamento a ciascuna TDdelle stesse righe (il collegamento deve essere l'elemento più esterno nella cella).

  2. 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.


7

Non puoi racchiudere un <td>elemento con un <a>tag, ma puoi realizzare funzionalità simili utilizzando l' onclickevento 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>

21
Uno dei problemi con l'utilizzo di onClick per questo tipo di scopo è che gli utenti non possono più utilizzare il pulsante centrale del mouse o fare clic tenendo premuto il tasto Ctrl per aprire i collegamenti in una nuova scheda (il che può essere davvero frustrante per quelli di noi che amano aprire i collegamenti in questo modo) . Un'altra nota a margine, non c'è motivo di complicare le cose creando una funzione che esegue solo un semplice comando. Se hai intenzione di farlo, metti semplicemente "document.location.href = ..." direttamente nell'attributo onclick.
orrd

7

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, metaKeydal 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

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/


Buona. Ctrl + Click sinistro non interrompe UIX
Yuri

1
Ancora perdendo "clic destro -> apri in una nuova scheda" o "apri in una nuova finestra"
JGInternational

4

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>

Così vicino al puro js. 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; } });
Ramon Bakker

1
Nel 2014 non era disponibile in vanilla js , you spoiled brat; P.
botenvouwer

2

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


1

Ciò evita di dover duplicare il collegamento nel tr - basta pescarlo dal primo a.

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});

0
//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.


0

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 display: table;, e non saranno selezionabili da tastiera o avranno testo di stato. 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.

Puoi modellare in modo specifico i TR dei link con il selettore CSS "tr [href]".


0

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.


0

Grazie per questo. Puoi modificare l'icona al passaggio del mouse assegnando una classe CSS alla riga come:

<tr class="pointer" onclick="document.location = 'links.html';">

e il CSS ha questo aspetto:

<style>
    .pointer { cursor: pointer; }
</style>

-2

Puoi aggiungere un tag A alla riga?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

È questo quello che stai chiedendo?


1
No, ho bisogno di fare clic per tutta l'area delle righe.
Max Frai
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.