comment cliquer sur une ligne entière dans un tableau en tant que lien?

Question

est-il possible de faire un clic sur une ligne entière en tant que lien? J'utilise bootstrap et le suivant ne fonctionne pas:

 <tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>
 

Answer 1

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

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


jQuery(document).ready(function($) {
      $(".clickableRow").click(function() {
            window.document.location = $(this).attr("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;

addendum

La raison de l'utilisation d'une classe plutôt que d'utiliser un id est parce que vous pouvez appliquer la solution sur plusieurs lignes:

<tbody>
       <tr class='clickableRow' href='url://link-for-first-row/'>
                        <td>Blah Blah</td>
                        <td>1234567</td>
                        <td>£158,000</td>
        </tr>
       <tr class='clickableRow' 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. La même fonction est de prendre soin de ces deux lignes. c'est à dire que vous êtes encore en utilisant ceci:

jQuery(document).ready(function($) {
      $(".clickableRow").click(function() {
            window.document.location = $(this).attr("href");
      });
});

Answer 2

Vous ne pouvez pas faire ça. C'est du HTML non valide. Vous ne pouvez pas mettre un <a> entre <tbody> et <tr> . Essayez plutôt ceci:

 <tr onclick="window.document.location='#';">
   ...
</tr>
 

Lorsque vous y travaillez, vous souhaitez utiliser JavaScript pour affecter le gestionnaire de clics en dehors du code HTML.

Answer 3

Vous pouvez inclure une ancre dans chaque <td> , comme ceci:

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

Vous pouvez alors utiliser display:block; sur les ancres pour rendre la ligne complète cliquable.

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

Exemple jsFiddle ici.

Ceci est probablement aussi optimal que vous allez l'obtenir, sauf si vous avez recours à JavaScript.

Answer 4

Oui, mais pas avec les éléments standard <table> . Si vous utilisez les propriétés de style display: table , vous pouvez. Ici et là, quelques violons à démontrer.

Ce code devrait faire l'affaire:

 <div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">
            1.1
        </div>
        <div style="display: table-cell">
            1.2
        </div>
        <div style="display: table-cell">
            1.3
        </div>
    </div>

    <a style="display: table-row" href="#">
        <div style="display: table-cell">
            2.1
        </div>
        <div style="display: table-cell">
            2.2
        </div>
        <div style="display: table-cell">
            2.3
        </div>
    </a>
</div>
 

Answer 5

Vous pouvez utiliser la méthode javascript onclick dans tr et la rendre cliquable, également si vous avez besoin de construire votre lien en raison de certains détails, vous pouvez déclarer une fonction en javascript et l'appeler en onclick, en passant certaines valeurs.