it-swarm.dev

html - wiersz tabeli jak link

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

93
Max Frai

Masz na to dwa sposoby:

  • Używanie javascript: 

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

  • Używanie 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

163
Esteban Küber

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

Łatwy i idealny dla mnie. Mam nadzieję, że to pomoże.

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

Edytować

Uzgodniony z Mattem Kantorem przy użyciu attr danych. Edytowana odpowiedź powyżej

52

Jeśli korzystasz z przeglądarki, która ją 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, ograniczasz się do nie umieszczania elementów bloków wewnątrz fragmentu <a>. Nie możesz też tego mieszać ze zwykłym <table>

26
Greg

Jeśli musisz użyć tabeli, możesz umieścić link w każdej komórce 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łniał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ć o wiele prostszy i nie dostaniesz „przerw” 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 odpowiada metodzie <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

Zwykłym sposobem jest przypisanie JavaScript do atrybutu onClick elementu TR.

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

  1. Dodaj to samo łącze do każdej zmiennej TD tego samego wiersza (łącze musi być najbardziej zewnętrznym elementem w komórce).

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

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

12
Aaron Digulla

Nie możesz zawinąć elementu <td> za pomocą znacznika <a>, ale możesz wykonać podobną funkcję, używając zdarzenia onclick do wywołania funkcji. Znaleziono przykład tutaj , coś takiego:

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

Odpowiedź od sirwilliam najlepiej mi pasuje. Udoskonaliłem Javascript przy pomocy skrótu klawiszowego Ctrl + LeftClick (otwiera stronę w nowej karcie). Zdarzenie ctrlKey jest używane przez komputery PC, metaKey dla komputerów 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;
    }
});

Przykład

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

6

Wiem, że to pytanie jest już odpowiedzią, ale nadal nie podoba mi się żadne rozwiązanie na tej stronie. Dla ludzi, którzy używają JQuery, stworzyłem ostateczne rozwiązanie, które pozwala ci dać wierszowi tabeli prawie to samo zachowanie, co tag <a>

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

HTMLTeraz możesz użyć tego na dowolnym elemencie <tr> w swoim HTML

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

Oszczędza to konieczności duplikowania linku w tr - wystarczy wyłowić go z pierwszego. 

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

Kiedy chcę symulować <tr> 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ś idzie za pomocą myszy na TR, cały wiersz (i te linki) otrzymuje styl zawisu i nie widzi, że istnieje wiele łączy.

Nadzieja może komuś pomóc. 

Skrzypce TUTAJ

1
sara_thepot

Mam inny sposób. Zwłaszcza jeśli musisz opublikować 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 SESJE, które strona, którą zamierzasz czytać i działać.

Naprawdę chciałbym wysłać wiadomość prosto do lokalizacji okna, ale nie sądzę, żeby to było możliwe.

0
Thomas Williams

Dzięki za to. Możesz zmienić ikonę dymka, przypisując klasę CSS do wiersza, np .:

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

a CSS wygląda tak:

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

Po przeczytaniu tego wątku i kilku innych wymyśliłem 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 go użyć, umieść href w tr/td/th, który chcesz być klikalny, na przykład: <tr href="http://stackoverflow.com">. I upewnij się, że powyższy skrypt jest wykonywany po utworzeniu elementu tr (poprzez jego umieszczenie lub użycie procedur obsługi zdarzeń).

Minusem jest to, że nie będą one całkowicie powodować, że TR będą zachowywać się jak linki z divami z display: table;, i nie będą mogły być wybierane za pomocą klawiatury ani mieć tekstu statusu. Edycja: Uruchomiłem nawigację za pomocą klawiatury, ustawiając opcję onkeydown, rolę i tabIndex. Możesz usunąć tę część, jeśli potrzebna jest tylko mysz. Jednak po najechaniu kursorem nie będą wyświetlać adresu URL na pasku stanu.

Możesz stylizować link TRs za pomocą selektora 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>

Być może coś w tym stylu? Chociaż używa JS, ale to tylko sposób na kliknięcie wiersza (tr).

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

A poza tym nie powinieneś używać stołu.

0
CaffGeek