web-dev-qa-db-fra.com

html - ligne 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 de div en ligne à quelque chose d'autre, mais je ne peux toujours pas le faire fonctionner.

htmlcsshyperlinkhtml-table
93
Max Frai

Vous avez deux façons de le faire:

  • Utiliser javascript: 

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

  • Utiliser des ancres:

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

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

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

Pour supprimer l’espace mort entre les colonnes:

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

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

163
Esteban Küber

Je me suis créé une fonction jQuery personnalisée:

Html

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

jQuery

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

Facile et parfait pour moi. Espérons que cela vous aide.

(Je sais que OP veut uniquement CSS et HTML, mais considérons jQuery)

Modifier

D'accord avec Matt Kantor en utilisant des données attr. Réponse modifiée ci-dessus

52
Ron van der Heijden

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

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

Bien sûr, vous ne pouvez pas insérer d'éléments de bloc dans le <a>. Vous ne pouvez pas non plus mélanger cela avec un <table> normal.

26
Greg

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

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

Et faites en sorte que les liens remplissent les cellules entières:

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

Si vous pouvez utiliser <div>s à la place d'un tableau, votre code HTML peut être beaucoup plus simple et vous n'aurez pas de "trous" dans les liens entre les cellules du tableau:

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

Voici le CSS qui accompagne la méthode <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

La méthode habituelle consiste à affecter du code JavaScript à l'attribut 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%; }

Ce dernier forcera le lien à remplir toute la cellule. Un clic n'importe où invoquera le lien.

12
Aaron Digulla

Vous ne pouvez pas encapsuler un élément <td> avec une balise <a>, mais vous pouvez obtenir une fonctionnalité similaire en utilisant l'événement onclick pour appeler une fonction. Un exemple est trouvé ici , quelque chose comme cette fonction:

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

Et ajoutez-le à votre table comme ceci:

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

La réponse de sirwilliam me convient le mieux. J'ai amélioré le Javascript avec la prise en charge 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/

6
Vlastislav Novák

Je sais que cette question a déjà reçu une réponse, mais je n’aime toujours pas les solutions proposées sur cette page. Pour les utilisateurs de JQuery, j’ai mis au point une solution finale qui permet de donner à la ligne de la table un comportement presque identique à celui de la balise <a>. 

Ceci est ma solution:

jQuery Vous pouvez l'ajouter par exemple à un fichier javascript standard inclus

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

HTMLVous pouvez maintenant l'utiliser sur n'importe quel élément <tr> de votre code HTML

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

Cela vous évite de dupliquer le lien dans le fichier - il suffit de le pêcher dans le premier fichier. 

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

Quand je veux simuler un <tr> avec un lien mais en respectant les normes html, je le fais.

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

De cette façon, quand quelqu'un va avec sa souris sur un TR, toute la rangée (et ces liens) prend le style de survol et il ne peut pas voir qu'il y a plusieurs liens.

L'espoir peut aider quelqu'un. 

Violon _ ICI

1
sara_thepot

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 configure les variables dans SESSIONS que la page que vous allez consulter peut lire et traiter.

J'aimerais vraiment pouvoir poster directement vers une fenêtre, mais je ne pense pas que ce soit possible.

0
Thomas Williams

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

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

et le CSS ressemble à:

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

Après avoir lu ce fil et quelques 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 être cliquable comme suit: <tr href="http://stackoverflow.com">. Et assurez-vous que le script ci-dessus est exécuté après la création de l'élément tr (par son emplacement ou à l'aide de gestionnaires d'événements).

L'inconvénient est que les TR ne se comporteront pas comme des liens, comme avec les divs avec display: table;, et qu'ils ne pourront pas être sélectionnés au clavier ni avoir de texte d'état. Éditer: pour que la navigation au clavier fonctionne en définissant onkeydown, role et tabIndex, vous pouvez supprimer cette partie si vous n’avez besoin que de la souris. Cependant, ils ne montreront pas l'URL dans la barre d'état lors du survol.

Vous pouvez styler spécifiquement le lien TR avec le sélecteur 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>

Quelque chose dans ce sens peut-être? Bien qu’il utilise JS, c’est la seule façon de rendre une ligne (tr) 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.

0
CaffGeek