it-swarm.dev

html - riga della tabella come un collegamento

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

93
Max Frai

Hai due modi per farlo:

  • Utilizzando javascript: 

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

  • Usando le ancore:

    <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

Ho fatto il secondo lavoro usando:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

Per sbarazzarsi dello spazio morto tra le colonne:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Ecco una semplice demo del secondo esempio: DEMO

163
Esteban Küber

Mi sono reso 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 usando i dati attr. Risposta sopra modificata

52

Se sei su un browser che lo supporta puoi usare i CSS per trasformare <a> in una riga della 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 di <a>. Non puoi neanche mescolare questo con un <table> regolare

26
Greg

Se devi usare una tabella, puoi inserire un link in ogni 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 l'intera cella:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

Se sei in grado di utilizzare <div>s anziché una tabella, il tuo codice 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 metodo <div>:

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}
12
system PAUSE

Il solito modo è di assegnare alcuni JavaScript all'attributo onClick dell'elemento TR.

Se non puoi usare JavaScript, devi usare un trucco:

  1. Aggiungi lo stesso link a ogni TD della stessa riga (il link 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 link a riempire l'intera cella, quindi facendo clic ovunque verrà richiamato il collegamento.

12
Aaron Digulla

Non è possibile racchiudere un elemento <td> con un tag <a>, ma è possibile ottenere funzionalità simili utilizzando l'evento onclick per chiamare una funzione. Un esempio è trovato qui , qualcosa come 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>
7
Donut

La risposta di sirwilliam mi sta meglio. Ho migliorato il Javascript con il supporto per hotkey Ctrl + LeftClick (apre la pagina in una nuova scheda). Event ctrlKey è usato da PC, metaKey da 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/

6

So che questa domanda ha già una risposta, ma a questa pagina non mi piace ancora nessuna soluzione. Per le persone che usano JQuery ho creato una soluzione finale che consente di assegnare alla riga della tabella lo stesso comportamento del tag <a>

Questa è la mia soluzione:

jQuery Puoi aggiungere questo ad esempio ad 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;
    }
});

HTMLOra puoi usarlo su qualsiasi elemento <tr> all'interno del tuo HTML

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>
4
botenvouwer

Questo ti evita di dover duplicare il link 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;
}
});
1
Will

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ù collegamenti.

La speranza può aiutare qualcuno. 

Fiddle HERE

1
sara_thepot

Ho un altro modo. Soprattutto se hai bisogno di 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 variabili imposta le variabili in SESSIONI che la pagina che stai per leggere può leggere e agire.

Mi piacerebbe molto un modo di postare direttamente in una finestra, ma non penso sia possibile.

0
Thomas Williams

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

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

e il CSS assomiglia a:

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

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 inserisci href in tr/td/th che desideri essere cliccabile come: <tr href="http://stackoverflow.com">. E assicurati che lo script sopra sia eseguito dopo che l'elemento tr è stato creato (dal suo posizionamento o usando i gestori di eventi).

Il rovescio della medaglia è che non farà in modo che i TR si comportino come link come con div con display: table;, e non saranno selezionabili da tastiera o hanno un testo di stato. Modifica: ho effettuato il lavoro di navigazione della tastiera impostando onkeydown, role e tabIndex, è possibile rimuovere quella parte se è necessario solo il mouse. Tuttavia, non mostreranno l'URL nella barra di stato al passaggio del mouse.

Puoi definire in modo specifico il collegamento TRs con il selettore CSS "tr [href]".

0
netman
//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Qualcosa in questo senso, forse? Anche se usa JS, ma è solo un modo per fare 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 usare comunque un tavolo.

0
CaffGeek