Domanda Collega l'intera riga della tabella?


So che è possibile collegare un'intera cella della tabella con CSS.

.tableClass td a{
   display: block;
}

C'è un modo per applicare un link a un'intera riga della tabella?


44
2018-02-05 03:25


origine


risposte:


Sono d'accordo con Matti. Sarebbe facile da fare con qualche semplice javascript. Un rapido esempio di jquery potrebbe essere qualcosa del genere:

<tr>
  <td><a href="http://www.example.com/">example</a></td>
  <td>another cell</td>
  <td>one more</td>
</tr>

e

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

quindi nel tuo CSS

tr.hover {
   cursor: pointer;
   /* whatever other hover styles you want */
}

39
2018-02-05 03:38



Sfortunatamente no. Non con HTML e CSS. Hai bisogno di un a elemento per creare un collegamento e non è possibile racchiudere un'intera riga della tabella in una.

Il più vicino che puoi ottenere è collegare ogni cella del tavolo. Personalmente collegherei solo una cella e uso JavaScript per rendere cliccabile il resto. È bene avere almeno una cella che sembra davvero un link, sottolineato e tutto, per chiarezza comunque.

Ecco un semplice frammento di jQuery per rendere tutte le righe della tabella con collegamenti selezionabili (cerca il primo link e "fa clic" su di esso)

$("table").on("click", "tr", function(e) {
    if ($(e.target).is("a,input")) // anything else you don't want to trigger the click
        return;

    location.href = $(this).find("a").attr("href");
});

23
2018-02-05 03:27



Esempio: http://xxjjnn.com/linktablerow.html

Collega l'intera riga:

<table>
  <tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
    <td> ...content... </td>
    <td> ...content... </td>
    ...
  </tr>
</table>

Vorresti evidenziare il passaggio del mouse per l'intera riga, quindi:

<table class="nogap">
  <tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
     ...
  </tr>
</table>

con qualcosa di simile al seguente per css, che rimuoverà il divario tra le celle della tabella e cambierà lo sfondo su hover:

tr.lovelyrow{
  background-color: hsl(0,0%,90%);
}

tr.lovelyrow:hover{
  background-color: hsl(0,0%,40%);
  cursor: pointer;
}

table.nogap{
  border-collapse: collapse;
}

Se stai usando Rails 3.0.9 allora potresti trovare utile questo codice di esempio:

Il mare ha molti pesci, il pesce ha molte scale, qui è snippet di app / view / fish / index.erb

<table>
<% @fishies.each do |fish| %>
  <tr onclick="location.href='<%= sea_fish_scales_path(@sea, fish) %>'"> 
    <td><%= fish.title %></td>
  </tr>
<% end %>
</table>

con @fishies e @sea sono definiti in app / controller / seas_controller.rb


16
2017-07-29 16:51



Usa il ::before pseudo elemento. In questo modo solo tu non devi gestire Javascript o creare collegamenti per ogni cella. Utilizzando il seguente table struttura

<table>
  <tr>
    <td><a href="http://domain.tld" class="rowlink">Cell</a></td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

tutto ciò che dobbiamo fare è creare un elemento di blocco che copra l'intera larghezza della tabella usando ::before sul link desiderato (.rowlink) in questo caso.

table {
  position: relative;
}

.rowlink::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5em; /* don't forget to set the height! */
}

dimostrazione

Il ::before è evidenziato in rosso nella demo in modo da poter vedere cosa sta facendo.


15
2018-04-04 01:15



Mi sento come la soluzione più semplice è sans javascript e semplicemente mettendo il link in ogni cella (a patto di non avere enormi calanchi tra le cellule o davvero pensare alle linee di confine). Hai il tuo css:

.tableClass td a{
   display: block;
}

e quindi aggiungere un collegamento per cella:

<table class="tableClass">
    <tr>
        <td><a href="#link">Link name</a></td>
        <td><a href="#link">Link description</a></td>
        <td><a href="#link">Link somthing else</a></td>
    </tr>
</table>

noioso ma pulito.


6
2018-01-24 21:36



Inoltre dipende se è necessario utilizzare un elemento tabella o no. Puoi imitare una tabella usando CSS e creare un elemento A nella riga

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

css:

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

5
2017-08-05 08:32



Per collegare l'intera riga, è necessario definire onclick funzione sulla tua riga, che è <tr>elemento e definire un mouse hover nel CSS per tr elemento per rendere il puntatore del mouse a un tipico click-hand nel web:

Nella tabella:

<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Text</strong></td>
</tr>

Nel CSS correlato:

tr:hover {
cursor: pointer;
}

2
2017-10-30 10:25