html – rangée de tableau comme un lien

Je ne peux pas définir ma ligne de table comme lien vers quelque chose. Je ne peux utiliser que CSS et HTML. J’ai essayé différentes choses, du div en ligne à un autre, mais je ne peux toujours pas le faire fonctionner.

Vous avez deux façons de le faire:

  • En utilisant javascript:

  • Utiliser des ancres:

    text text

J’ai fait le deuxième travail en utilisant:

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

Pour se débarrasser de l’espace mort entre les colonnes:

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

Voici une démonstration simple du deuxième exemple: DEMO

Je me suis fait une fonction jquery personnalisée:

Html

  

jQuery

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

Facile et parfait pour moi. J’espère que cela vous aide.

(Je sais que OP veulent CSS et HTML uniquement, mais considérez jQuery)

modifier

Convenu avec Matt Kantor à l’aide de données attr. Réponse modifiée ci-dessus

Si vous utilisez un navigateur qui le prend en charge, vous pouvez utiliser CSS pour transformer le en une ligne de tableau:

 .table-row { display: table-row; } .table-cell { display: table-cell; }  

Bien sûr, vous êtes limité à ne pas placer d’éléments de bloc dans le . Vous ne pouvez pas non plus mélanger cela avec un

régulier

La méthode habituelle consiste à atsortingbuer du JavaScript à l’atsortingbut onClick de l’élément TR .

Si vous ne pouvez pas utiliser JavaScript, vous devez utiliser une astuce:

  1. Ajoutez le même lien à chaque TD de la même ligne (le lien doit être l’élément le plus externe de la cellule).

  2. Transformez les liens en éléments de bloc: a { display: block; width: 100%; height: 100%; } a { display: block; width: 100%; height: 100%; }

Ce dernier forcera le lien à remplir toute la cellule, donc cliquer n’importe où pour appeler le lien.

Si vous devez utiliser une table, vous pouvez insérer un lien dans chaque cellule de tableau:

 
John Smith 123 Fake St 90210
Peter Nguyen 456 Elm Ave 90210

Et faites les liens remplir les cellules entières:

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

Si vous pouvez utiliser

place d’une table, votre code HTML peut être beaucoup plus simple et vous n’obtiendrez pas de “lacunes” dans les liens entre les cellules de la table:

  

Voici le CSS qui accompagne la méthode

:

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

Vous ne pouvez pas encapsuler un élément

avec une balise , mais vous pouvez obtenir des fonctionnalités similaires en utilisant l’événement onclick pour appeler une fonction. Un exemple est trouvé ici , quelque chose comme cette fonction:

  

Et ajoutez-le à votre table comme ceci:

  

Réponse de sirwilliam me convient le mieux. J’ai amélioré le Javascript avec le support du raccourci clavier Ctrl + LeftClick (ouvre la page dans un nouvel onglet). L’événement ctrlKey est utilisé par les PC, metaKey par 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; } }); 

Exemple

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

Je sais que cette question a déjà reçu une réponse mais je n’aime toujours aucune solution sur cette page. Pour les personnes qui utilisent JQuery, j’ai trouvé une solution finale qui vous permet de conférer à la ligne de la table le même comportement que la balise .

Ceci est ma solution:

jQuery Vous pouvez append ceci par exemple à un fichier javascript inclus standard

 $('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 Maintenant, vous pouvez l’utiliser sur n’importe quel élément

votre code HTML

  value value value  

Cela vous évite de devoir dupliquer le lien dans le fichier.

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

Quand je veux simuler un

avec un lien mais en respectant les normes HTML, je le fais.

HTML:

 

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

De cette façon, quand quelqu’un va avec sa souris sur un TR, toute la ligne (et ce lien) obtient le style de vol stationnaire et il ne peut pas voir qu’il y a plusieurs liens.

L’espoir peut aider quelqu’un.

Violon ICI

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

Quelque chose dans ce sens peut-être? Bien qu’elle utilise JS, c’est la seule façon de rendre une ligne cliquable.

Sauf si vous avez une seule cellule avec une balise d’ancrage qui remplit la cellule entière.

Et puis, vous ne devriez pas utiliser une table de toute façon.

Après avoir lu ce fil de discussion et d’autres, j’ai trouvé la solution suivante en 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")); 

Pour l'utiliser, placez le href dans tr / td / th que vous souhaitez pouvoir cliquer sur:

. Et assurez-vous que le script ci-dessus est exécuté après la création de l'élément tr (par son placement ou en utilisant des gestionnaires d'événements).

L'inconvénient est qu'il ne fera pas totalement se comporter les TR comme des liens avec des divs avec display: table; , et ils ne seront pas sélectionnables au clavier ou auront un texte d'état. Edit: J'ai fait fonctionner la navigation au clavier en définissant onkeydown, role et tabIndex, vous pouvez supprimer cette partie si seule la souris est nécessaire. Ils ne montreront pas l’URL dans la barre d’état lors du survol.

Vous pouvez définir spécifiquement le lien TRs avec le sélecteur CSS "tr [href]".

J’ai un autre moyen. Surtout si vous avez besoin de publier des données en utilisant 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"; }); }); 

Set variable définit des variables dans SESSIONS que la page que vous allez pouvoir lire et utiliser.

Je voudrais vraiment un moyen de poster directement sur un emplacement de fenêtre, mais je ne pense pas que ce soit possible.

Merci pour cela. Vous pouvez changer l’icône de survol en assignant une classe CSS à la ligne comme:

  

et le CSS ressemble à:

  

Pouvez-vous append une balise A à la ligne?

    

Est-ce ce que vous demandez?