comment faire une ligne dans une table cliquable comme un lien?

Note de l'auteur j':

Veuillez regarder les autres réponses ci-dessous, en particulier ceux qui n'utilisent pas de jquery.

Note de l'auteur II:

Préservés pour la postérité, mais sûrement, de la mal approche en 2019. (A même été mauvais en 2017)

Vous êtes en utilisant Bootstrap qui signifie que vous êtes à l'aide de jQuery :^), donc une façon de le faire est:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

Bien sûr, vous n'avez pas à utiliser href commutateur ou d'emplacements, vous pouvez faire ce que vous aimez dans la fonction de gestionnaire de clic. Lire sur jQuery et comment écrire des gestionnaires d';

Avantage de l'utilisation d'un classe sur id, vous pouvez appliquer la solution sur plusieurs lignes:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

et votre base de code ne change pas. Le même gestionnaire de prendre soin de toutes les lignes.

Une autre option

Vous pouvez utiliser Bootstrap, jQuery rappels comme ceci (dans un document.ready rappel):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

Cela a l'avantage de ne pas être remise sur la table de tri (ce qui arrive avec l'autre option).

---

Remarque

Depuis que cela a été posté window.document.location est obsolète (ou obsolète à tout le moins) utilisation window.location à la place.

Vous pourriez inclure un point d'ancrage à l'intérieur de chaque <td>, comme suit:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

Vous pouvez ensuite utiliser display:block; sur les ancrages pour faire le plein de ligne cliquable.

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

Exemple jsFiddle ici.

C'est probablement la plus optimale que vous allez l'obtenir, sauf si vous recourir à JavaScript.

Une solution plus flexible est de cibler n'importe quoi avec les données d'attribut href. C'était, vous pouvez réutiliser le code facilement dans des endroits différents.

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

Puis dans votre jQuery seulement la cible de n'importe quel élément avec l'attribut:

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

Et n'oubliez pas de style css:

[data-href] {
    cursor: pointer;
}

Maintenant, vous pouvez ajouter les données d'attribut href pour n'importe quel élément et qu'il fonctionne. Quand j'écris des petits bouts comme cela, je l'aime à être flexible. N'hésitez pas à ajouter de la vanille js solution si vous en avez un.

Il y a un beau techniquement le faire avec <a> balise à l'intérieur de <tr>, qui pourrait être sémantiquement incorrect (pourrait vous donner un navigateur avertissement), mais fonctionnera avec aucun JavaScript/jQuery requis:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; //or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS: Notez l'astuce ici est de mettre <a> balise comme dernier élément, sinon il va essayer de prendre l'espace de la première <td> cellule.

PPS: Maintenant, votre ligne sera cliquable et vous pouvez utiliser ce lien pour ouvrir dans un nouvel onglet (Ctrl/CMD+clic)

Ici est une façon en mettant une transparence d'Un élément sur les lignes de la table. Les avantages sont:

• est un réel élément de lien: sur le vol stationnaire changements pointeur, montre la cible du lien dans la barre d'état, peut être le clavier navigué, peut être ouvert dans un nouvel onglet ou une fenêtre, l'URL peut être copié, etc
• le tableau semble la même que sans le lien ajouté
• aucun changement dans le code de la table elle-même

Inconvénients:

• la taille de l'élément doit être définie dans un script, à la fois sur la création et après la modification de la taille de la ligne qu'il couvre (sinon, il pourrait être fait avec pas de JavaScript, ce qui est toujours possible si la taille de la table est également définie dans le code HTML ou CSS)

La table reste est:

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

D'ajouter les liens (pour chaque ligne) via jQuery JavaScript par l'insertion d'un élément dans chaque colonne et en définissant les propriétés nécessaires:

//v1, fixed for IE and Chrome
//v0, worked on Firefox only
//width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');//debug: .css('background-color', '#f11');
    //insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

La largeur et la hauteur peut être difficile, si le nombre de remplissages et les marges sont utilisés, mais en général quelques pixels de large ne devrait même pas question.

Démo en Live ici: http://jsfiddle.net/qo0dx0oo/ (fonctionne sous Firefox mais pas IE ou Chrome, il y a le lien est placé erreur)

Fixe pour Chrome et IE (encore travaille en FF trop): http://jsfiddle.net/qo0dx0oo/2/

Ce code soufflet fera de votre tableau interactif. En cliquant sur les liens dans cet exemple va afficher le lien dans une boîte de dialogue d'alerte au lieu de suivre le lien.

Le code HTML:

Voici le code HTML derrière l'exemple ci-dessus:

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

Le CSS

Et le CSS:

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

Le jQuery

Et enfin le jQuery qui fait de la magie:

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

Ce qu'il fait, c'est quand une ligne est cliqué, une recherche est effectuée pour le href appartenant à un point d'ancrage. Si c'est le cas, la fenêtre de l'emplacement est défini href.

Vous pouvez ajouter le bouton de rôle à une ligne du tableau et Bootstrap va changer le curseur sans css changements. J'ai décidé d'utiliser ce rôle comme un moyen de faire facilement une ligne cliquable avec très peu de code.

Html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

Vous pouvez appliquer ce même principe pour ajouter le bouton rôle à n'importe quelle balise.

Un très solution la plus simple est juste de l'utilisation sur clic, et plus correct, à mon point de vue, parce que cette séparée de la vue et le contrôleur, et vous n'avez pas besoin de coder en dur l'adresse URL ou quoi que plus vous avez besoin de faire accomplir avec le clic.
Il fonctionne avec Angulaire ng-cliquez sur trop.

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

Exemple de travail ici

Ici est d'une autre façon...

Le code HTML:

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

Le jQuery:

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});

Pourquoi nous n'utilisons pas de "div" balises....

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>