Korzystam z Bootstrap i następujące funkcje nie działają:
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>
html
html-table
bootstrap-4
użytkownik1038814
źródło
źródło
Odpowiedzi:
Nota autora I:
Proszę spojrzeć na inne odpowiedzi poniżej, szczególnie te, które nie używają jquery.
Nota autora II:
Zachowane dla potomności, ale z pewnością niewłaściwe podejście w 2020 r. (Nie było idiomatyczne nawet w 2017 r.)
Oryginalna odpowiedź
Używasz Bootstrap, co oznacza, że używasz jQuery: ^), więc jednym ze sposobów jest:
Oczywiście nie musisz używać href ani przełączać lokalizacji, możesz robić, co chcesz w funkcji obsługi kliknięć. Czytaj dalej
jQuery
i jak pisać programy obsługi;Zaletą korzystania z klasy nad identyfikatorem jest to, że można zastosować rozwiązanie do wielu wierszy:
a baza kodu się nie zmienia. Ten sam przewodnik zająłby się wszystkimi rzędami.
Inna opcja
Możesz użyć wywołań zwrotnych jQuery Bootstrap w następujący sposób (w
document.ready
wywołaniu zwrotnym):Ma to tę zaletę, że nie jest resetowane podczas sortowania tabeli (co dzieje się w przypadku innej opcji).
Uwaga
Ponieważ ten post został opublikowany
window.document.location
jest przestarzały (lub przynajmniej przestarzały) użyjwindow.location
zamiast niego.źródło
href
atrybutu natr
, ponieważ nie jest to prawidłowy atrybut dla tego elementu. Zamiast tego użyj atrybutów danych:data-url="{linkurl}"
i w kodzie js:$(this).data('url')
clickable_row
(CamelCase jest niezgodny ze standardami HTML i powinien być pisany małymi literami (miałem kilka problemów z przeglądarką kilka razy z tym)), a następnie jQuery jest$('.clickable_row tr').click(function ...
Ale naprawdę powinieneś używaćdata-
do przechowywania danych, zamiast tego,href
ponieważ taka jest specyfikacja danych niestandardowych.data-url
i jquery uzyska do niej dostęp w następujący sposób$(this).data(url);
a
znacznika zdisplay: block;
każdą komórką jest nieco denerwujące, ale wydaje się, że jest to najbardziej użyteczny sposób rozwiązania tego problemu.Nie możesz tego zrobić. To jest nieprawidłowy HTML. Nie możesz wstawić
<a>
między<tbody>
a a<tr>
. Spróbuj zamiast tego:dodaj styl do widoku wskaźnika
Kiedy nad tym pracujesz, możesz użyć JavaScript, aby przypisać moduł obsługi kliknięć poza HTML.
źródło
<a>
w klikniętym wierszu. (to by równieżonClick={() => window.open('https://stackoverflow.com/', '_blank')}
Możesz dołączyć kotwicę do każdego
<td>
, tak:Następnie można użyć
display:block;
zakotwiczeń, aby klikalny był cały wiersz.Przykład jsFiddle tutaj.
Jest to prawdopodobnie tak optymalne, jak to tylko możliwe, chyba że skorzystasz z JavaScript.
źródło
tabindex="-1"
we wszystkich oprócz pierwszego<td>
linku, więc użytkownik tabuluje wiersz po rzędzie, a nie komórkę do komórki. Ponadto nadal możesz wyróżnić / obrysować cały wiersz, jeśli chcesz używać:focus-within
pseudoklasy CSS.Połączony wiersz tabeli jest możliwy, ale nie ze standardowymi
<table>
elementami. Możesz to zrobić za pomocądisplay: table
właściwości stylu. Tu i tutaj jest kilka skrzypiec do zademonstrowania.Ten kod powinien załatwić sprawę:
Należy pamiętać, że role ARIA są potrzebne, aby zapewnić odpowiednią dostępność, ponieważ standardowe
<table>
elementy nie są używane. Może być konieczne dodanie dodatkowych ról, np.role="columnheader"
Jeśli dotyczy. Dowiedz się więcej w przewodniku tutaj.źródło
/
Klucz w Firefox), nawigacja (tab
klucz), kopiowanie lokalizacji linku, otwieranie w nowej karcie / oknie itp. Nawet dla dostępnych / specjalnych potrzebuje przeglądarek. Moją jedyną nitpick jest to, że nie zagnieździłbym<div>
wewnątrz<a>
, więc komórki byłyby lepiej oznaczone jako<span>
._tables.scss
i kilka innych losowych elementów Bootstrap , zastępując wszystkie wystąpienia elementów tabeli klasami CSS, które wybrałem (które są po prostu takie same jak elementy:th
→.th
) Niewiele pracy w porównaniu do korzyści, naprawdę .<table>
istnieje z jakiegoś powodu. Ale to wciąż bije wszelkie rozwiązania javascript :)Osiągnięty przy użyciu standardowego Bootstrap 4.3+ w następujący sposób - nie wymaga jQuery ani żadnych dodatkowych klas css!
Kluczem jest użycie
stretched-link
tekstu w komórce i zdefiniowanie go<tr>
jako bloku zawierającego.Blok zawierający można zdefiniować na różne sposoby, na przykład poprzez ustawienie
transform
wartość none none (jak w powyższym przykładzie).Aby uzyskać więcej informacji przeczytaj tutaj jest dokumentacja Bootstrap dla
stretched-link
.źródło
scope="row"
? Nie używam zakresu, a wiersz nadal zachowuje się jak łącze.scope="row"
- sprawdź historię, jeśli chcesz zobaczyć, co jeszcze mogło być edytowane. Nie cofnąłem jednak edycji, ponieważ fragment kodu wydaje się działać (podobnie jak oryginał) i nie miałem okazji przetestować nowego kodu wyczerpująco :-)tr
tego, że znacznik nie jest rozpoznawany jako reguły dla bloku zawierającego w przeglądarkach ... stackoverflow.com/questions/61342248/O wiele bardziej elastycznym rozwiązaniem jest celowanie w cokolwiek za pomocą atrybutu data-href. Dzięki temu możesz łatwo ponownie użyć kodu w różnych miejscach.
Następnie w swoim jQuery po prostu celuj w dowolny element z tym atrybutem:
I nie zapomnij stylizować swojego css:
Teraz możesz dodać atrybut data-href do dowolnego elementu, a on zadziała. Kiedy piszę takie fragmenty, podoba mi się ich elastyczność. Jeśli chcesz, możesz dodać do tego waniliowe rozwiązanie js.
źródło
Możesz użyć tego komponentu bootstrap:
http://jasny.github.io/bootstrap/javascript/#rowlink
Jasny Bootstrap
Brakujące elementy ulubionego frontu.
Stosowanie
Poprzez atrybuty danych
Dodaj klasę
.rowlink
i atrybutdata-link="row"
do elementu<table>
lub<tbody>
. W przypadku innych opcji dodaj nazwę do danych, ponieważ wdata-target="a.mainlink"
komórce A można wykluczyć, dodając.rowlink-skip
klasę do<td>
.Przez JavaScript
Wywołaj maskę wprowadzania za pomocą javascript:
źródło
Jest dobry sposób, aby technicznie zrobić to z
<a>
tagiem wewnątrz<tr>
, który może być semantycznie niepoprawny (może dać ostrzeżenie w przeglądarce), ale będzie działał bezJavaScript/jQuery
wymaganych:PS: Zauważ, że sztuczka polega na tym, aby umieścić
<a>
znacznik jako ostatni element, w przeciwnym razie spróbuje on zająć miejsce w pierwszej<td>
komórce.PPS: Teraz cały wiersz będzie klikalny i możesz użyć tego linku, aby otworzyć również w nowej karcie (Ctrl / CMD + kliknięcie)
źródło
<tr>
elementy nie mogą mieć<a>
elementu jako dziecko. Tylko<td>
i<th>
są ważnymi dziećmi. Zobacz: stackoverflow.com/questions/12634715/…Możesz użyć metody onclick javascript w tr i ustawić ją jako klikalną, również jeśli musisz zbudować link ze względu na pewne szczegóły, możesz zadeklarować funkcję w javascript i wywołać ją w onclick, przekazując pewne wartości.
źródło
Oto sposób na umieszczenie przezroczystego elementu A na rzędach tabeli. Zalety to:
Niedogodności:
Stół pozostaje niezmieniony:
Dodaj łącza (dla każdego wiersza) za pomocą jQuery JavaScript, wstawiając element A do każdej pierwszej kolumny i ustawiając potrzebne właściwości:
Ustawienie szerokości i wysokości może być trudne, jeśli używanych jest wiele wypełnień i marginesów, ale generalnie kilka pikseli nie powinno nawet mieć znaczenia.
Demo na żywo tutaj: http://jsfiddle.net/qo0dx0oo/ (działa w Firefoksie, ale nie w IE ani Chrome, tam link jest źle ustawiony)
Naprawiono dla Chrome i IE (nadal działa również w FF): http://jsfiddle.net/qo0dx0oo/2/
źródło
onmouseover
Możesz dodać rolę przycisku do wiersza tabeli, a Bootstrap zmieni kursor bez żadnych zmian css. Postanowiłem użyć tej roli jako sposobu na łatwe kliknięcie dowolnego wiersza przy bardzo małym kodzie.
HTML
jQuery
Możesz zastosować tę samą zasadę, aby dodać rolę przycisku do dowolnego znacznika.
źródło
Poniższy kod sprawi, że cały stół będzie klikalny. Kliknięcie łączy w tym przykładzie spowoduje wyświetlenie łącza w oknie dialogowym ostrzeżenia zamiast podążania za linkiem.
HTML:
Oto kod HTML za powyższym przykładem:
CSS
I CSS:
JQuery
I wreszcie jQuery, dzięki któremu magia się dzieje:
Po kliknięciu wiersza następuje wyszukiwanie href należącego do kotwicy. Jeśli zostanie znaleziony, lokalizacja okna zostanie ustawiona na ten href.
źródło
Bardzo łatwą opcją jest po prostu użycie kliknięcia i bardziej poprawne, z mojego punktu widzenia, ponieważ oddziela to widok od kontrolera i nie trzeba kodować adresu URL ani niczego więcej, co trzeba zrobić za pomocą kliknięcia . Działa również z Angular ng-click.
Przykład pracy tutaj
źródło
Inna opcja wykorzystująca
<a>
pozycje CSS i niektóre jQuery lub JS :HTML:
CSS:
Następnie musisz podać szerokość, używając na przykład jQuery:
źródło
Wiem, że ktoś już napisał prawie to samo, jednak moja droga jest poprawna (div nie może być dzieckiem A), a także lepiej jest używać klas.
Możesz naśladować tabelę za pomocą CSS i ustawić element A jako wiersz
css:
źródło
wolę użyć
onclick=""
atrybutu, ponieważ jest łatwy w użyciu i zrozumiały dla początkującychźródło
Oto proste rozwiązanie ..
źródło
Przyjęta odpowiedź jest świetna, ale proponuję małą alternatywę, jeśli nie chcesz powtarzać adresu URL przy każdym tr. Więc umieść adres URL lub href w adresie danych tabeli, a nie tr.
Jest to również dobre, ponieważ nie musisz dodawać atrybutu danych kliknięcia do każdego tr. Inną dobrą rzeczą jest to, że nie używamy klasy do wywołania kliknięcia, ponieważ klasy powinny być naprawdę używane tylko do stylizacji.
źródło
Jednym z rozwiązań, o którym nie wspomniano wcześniej, jest użycie pojedynczego łącza w komórce i trochę CSS do rozszerzenia tego łącza na komórki:
źródło
Chociaż główne rozwiązanie tutaj jest świetne, moje rozwiązanie eliminuje potrzebę zajęć. Wszystko, co musisz zrobić, to dodać atrybut data-href z podanym adresem URL.
źródło
Zainwestowałem dużo czasu, próbując rozwiązać ten problem.
Istnieją 3 podejścia:
Użyj JavaScript. Oczywiste wady: nie można natywnie otworzyć nowej karty, a po najechaniu kursorem nad wiersz nie będzie żadnych informacji na pasku stanu, jak w przypadku zwykłych linków. Dostępność to także pytanie.
Używaj tylko HTML / CSS. Oznacza to umieszczenie
<a>
pod każdym zagnieżdżonym<td>
. Proste podejście, takie jak to skrzypce , nie działa - Ponieważ klikalna powierzchnia niekoniecznie jest taka sama dla każdej kolumny. To poważny problem z UX. Ponadto, jeśli potrzebujesz<button>
znaku w wierszu, nie jest prawidłowym kodem HTML zagnieżdżanie go pod<a>
tagiem (chociaż przeglądarki są w tym zgodne ).Znalazłem 3 inne sposoby na wdrożenie tego podejścia. Po pierwsze jest ok, pozostałe dwa nie są świetne.
a) Spójrz na ten przykład :
Działa, ale z powodu niespójności między Chrome i Firefox wymaga włamania specyficznego dla przeglądarki, aby pokonać różnice. Również Chrome zawsze wyrówna zawartość komórki do góry, co może powodować problemy z długimi tekstami, zwłaszcza jeśli w grę wchodzą różne wysokości linii.
b) Ustawienie
<td>
na{ display: contents; }
. Prowadzi to do 2 innych problemów:b1. Jeśli ktoś inny spróbuje stylizować bezpośrednio
<td>
tag, na przykład ustawiając go{ width: 20px; }
, musimy jakoś przekazać ten styl do<a>
tagu. Potrzebujemy do tego trochę magii, prawdopodobnie więcej magii niż w alternatywnej wersji Javascript.b2.
{ display: contents; }
wciąż jest eksperymentalny; w szczególności nie jest obsługiwany w Edge.c) Ustawienie
<td>
na{ height: --some-fixed-value; }
. To po prostu nie jest wystarczająco elastyczne.Ostatnim podejściem, o którym poważnie myślę, jest w ogóle nie używanie wierszy , które można kliknąć . Wiersze, które można klikać, nie są świetnym doświadczeniem w UX: nie jest łatwo wizualnie oznaczyć je jako klikalne i stanowi wyzwanie, gdy klikalne jest wiele części w wierszach, takich jak przyciski. Tak więc realną alternatywą może być umieszczenie
<a>
znacznika tylko w pierwszej kolumnie, wyświetlanego jako zwykły link, i nadanie mu roli nawigowania po całym wierszu.źródło
Oto inny sposób ...
HTML:
JQuery:
źródło
Zamień # na adres URL,
tabindex="0"
dzięki czemu dowolny element może być aktywowanyźródło
Możesz podać wierszowi identyfikator, np
<tr id="special"> ... </tr>
a następnie użyj jquery, aby powiedzieć coś takiego:
$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})
źródło
Dlaczego nie powinniśmy używać tagów „div”…
źródło