Nie mogę ustawić wiersza tabeli jako linku do czegoś. Mogę używać tylko css i html. Próbowałem różnych rzeczy, od div in row do czegoś innego, ale nadal nie mogę tego zrobić.

Możesz to zrobić na dwa sposoby:

• Korzystanie z javascript:

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

• Korzystanie z kotwic:

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

Drugą pracę wykonałem używając:

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

Aby pozbyć się martwej przestrzeni między kolumnami:

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

Oto proste demo drugiego przykładu: DEMO

Zrobiłem sobie niestandardową funkcję jquery:

HTML

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

jQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

Dla mnie łatwe i idealne. Mam nadzieję, że to ci pomoże.

(Wiem, że OP chce tylko CSS i HTML, ale rozważ jQuery)

Edytować

Uzgodniono z Mattem Kantorem przy użyciu atr. Danych. Edytowana odpowiedź powyżej

Jeśli korzystasz z przeglądarki, która to obsługuje, możesz użyć CSS do przekształcenia <a>w wiersz tabeli:

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

Oczywiście nie możesz umieszczać elementów blokowych wewnątrz <a>. Nie możesz też łączyć tego ze zwykłym<table>

Jeśli trzeba użyć tabeli, można umieścić link do każdej komórki tabeli:

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

I spraw, by linki wypełniły całe komórki:

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

Jeśli możesz użyć <div>s zamiast tabeli, twój HTML może być dużo prostszy i nie dostaniesz "luk" w linkach między komórkami tabeli:

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

Oto CSS, który pasuje do <div>metody:

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

Zwykłym sposobem jest przypisanie części JavaScript do onClickatrybutu TRelementu.

Jeśli nie możesz użyć JavaScript, musisz użyć sztuczki:

1. Dodaj to samo łącze do każdego TDz tego samego wiersza (łącze musi być najbardziej zewnętrznym elementem komórki).

2. Zamień linki w elementy blokowe: a { display: block; width: 100%; height: 100%; }

Ta ostatnia zmusi link do wypełnienia całej komórki, więc kliknięcie w dowolnym miejscu wywoła łącze.

Nie możesz opakować <td>elementu <a>tagiem, ale możesz osiągnąć podobną funkcjonalność, używając onclickzdarzenia do wywołania funkcji. Tutaj znajduje się przykład , coś takiego jak ta funkcja:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

I dodaj to do swojego stołu w ten sposób:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

Odpowiedź od sirwilliam pasuje do mnie najlepiej. Poprawiłem Javascript z obsługą skrótu Ctrl + LeftClick (otwiera stronę w nowej karcie). Wydarzenie ctrlKeyjest używane przez komputery PC i komputery metaKeyMac.

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;
    }
});

Przykład

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

Wiem, że odpowiedź na to pytanie jest już dostępna, ale nadal nie podoba mi się żadne rozwiązanie na tej stronie. Dla osób używających JQuery stworzyłem ostateczne rozwiązanie, które umożliwia nadanie wierszowi tabeli prawie takiego samego zachowania jak <a>tag.

To jest moje rozwiązanie:

jQuery Możesz dodać to na przykład do standardowego dołączonego pliku javascript

$('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 Teraz możesz użyć tego na dowolnym <tr>elemencie wewnątrz twojego HTML

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

Kiedy chcę zasymulować <tr>link z linkiem, ale przestrzegając standardów HTML, robię to.

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

W ten sposób, gdy ktoś porusza się myszką na TR, cały wiersz (i ten link) otrzymuje styl po najechaniu i nie widzi, że istnieje wiele linków.

Nadzieja może komuś pomóc.

Fiddle TUTAJ

Dzięki temu nie musisz duplikować łącza w tr - po prostu wyłóż je z pierwszego a.

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

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

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

Może coś w tym stylu? Chociaż używa JS, ale to jedyny sposób, aby wiersz (tr) był klikalny.

Chyba że masz pojedynczą komórkę ze znacznikiem kotwicy, który wypełnia całą komórkę.

A potem i tak nie powinieneś używać stołu.

Po przeczytaniu tego wątku i kilku innych wpadłem na następujące rozwiązanie w 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"));

Aby użyć go umieścić href w tr / td / th że chcesz być klikalne jak: <tr href="http://stackoverflow.com">. I upewnij się, że powyższy skrypt jest wykonywany po utworzeniu elementu tr (przez jego umieszczenie lub użycie programów obsługi zdarzeń).

Wadą jest to, że nie całkowicie sprawi, że TR będą zachowywać się jak linki, jak w przypadku elementów DIV z display: table;, i nie będą wybierane za pomocą klawiatury ani nie będą miały tekstu statusu. Edycja: sprawiłem, że nawigacja po klawiaturze działała, ustawiając onkeydown, role i tabIndex, możesz usunąć tę część, jeśli potrzebna jest tylko mysz. Nie pokażą jednak adresu URL na pasku stanu po najechaniu kursorem.

Możesz określić konkretny styl dla linków TR za pomocą selektora CSS „tr [href]”.

Mam inny sposób. Zwłaszcza jeśli musisz publikować dane za pomocą 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";
    });
});

Ustaw zmienną ustawia zmienne w SESJACH, które strona, którą zamierzasz czytać, może na nich działać.

Bardzo chciałbym mieć możliwość wysyłania postów bezpośrednio do lokalizacji okna, ale nie sądzę, że jest to możliwe.

Dzięki za to. Możesz zmienić ikonę najechania, przypisując klasę CSS do wiersza, na przykład:

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

a CSS wygląda następująco:

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

Czy możesz dodać tag A do wiersza?

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

Czy o to pytasz?