Vous utilisez Bootstrap, ce qui signifie que vous utilisez jQuery: ^), une façon de faire est de:

   Blah Blah 1234567 £158,000   jQuery(document).ready(function($) { $(".clickable-row").click(function() { window.location = $(this).data("href"); }); }); 

Bien sûr, vous n’avez pas à utiliser les emplacements href ou switch, vous pouvez faire ce que vous voulez dans la fonction de gestionnaire de clic. Lisez sur jQuery et comment écrire des gestionnaires;

L’avantage d’utiliser un identifiant de classe est que vous pouvez appliquer la solution à plusieurs lignes:

   Blah Blah 1234567 £158,000   More money 1234567 £800,000   

et votre base de code ne change pas. Le même gestionnaire prendrait en charge toutes les lignes.

Une autre option

Vous pouvez utiliser les rappels BootStrap jQuery comme ceci (dans un rappel de document.ready ):

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

Cela a l’avantage de ne pas être réinitialisé lors du sorting de la table (ce qui se produit avec l’autre option).

Remarque

Comme ceci a été posté window.document.location est obsolète (ou au moins obsolète), utilisez plutôt window.location .

Vous ne pouvez pas faire ça. C’est du HTML non valide. Vous ne pouvez pas mettre un entre un

et un

. Essayez plutôt ceci:

  ...  

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

Vous pouvez inclure une ancre dans chaque

, comme ceci:

  Blah Blah 1234567 more text  

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.

Oui, mais pas avec les éléments

standard. Si vous utilisez l’ display: table propriétés de style de display: table , vous pouvez. Ici et là, quelques violons à démontrer.

Ce code devrait faire l’affaire:

 .table { display: table; } .row { display: table-row; } .cell { display: table-cell; padding: 10px; } .row:hover { background-color: #cccccc; } .cell:hover { background-color: #e5e5e5; } 

  
 
 
 1.1 
 
 1.2 
 
 1.3 
 
  
 2.1 
 
 2.2 
 
 2.3 
   

Vous pouvez utiliser ce composant bootstrap:

http://jasny.github.io/bootstrap/javascript/#rowlink

Jasny Bootstrap

Les composants manquants pour votre framework frontal préféré.

 
 
 
Name
Description
Actions
 
 
 
Input mask
Input masks can be used to force the user to enter data conform a specific format.
Action
 
jasny.net
Shared knowledge of Arnold Daniels aka Jasny.
Action
 
Launch modal
Toggle a modal via JavaScript by clicking this row.
Action
 
  

Usage

Via des atsortingbuts de données

Ajoutez la classe .rowlink et atsortingbuez data-link="row" à un élément

ou

. Pour les autres options, ajoutez le nom à data-, comme dans data-target="a.mainlink" Une cellule peut être exclue en ajoutant la classe .rowlink-skip au

.

Via JavaScript

Appelez le masque de saisie via javascript:

 $('tbody.rowlink').rowlink() 

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.

Voici un moyen de mettre un élément A transparent sur les lignes de la table. Les avantages sont:

• est un élément de lien réel: sur le pointeur de changements de survol, affiche le lien de la cible dans la barre d’état, peut être navigué au clavier, peut être ouvert dans un nouvel onglet ou une nouvelle fenêtre, l’URL peut être copiée, etc.
• la table a le même aspect que sans le lien ajouté
• pas de changement dans le code de la table lui-même

Désavantages:

• taille de l’élément A doit être défini dans un script, à la fois lors de la création et après toute modification de la taille de la ligne qu’il couvre (sinon, cela pourrait être fait sans JavaScript, ce qui est toujours possible si la taille de la table est également définie) en HTML ou CSS)

La table rest telle quelle:

 
 
 
 
Blah Blah
 
1234567
 
£158,000
 
 
  

Ajoutez les liens (pour chaque ligne) via JavaScript jQuery en insérant un élément A dans chaque première colonne et en définissant les propriétés requirejses:

 // 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  element var myA=$(''); $(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) ; }); 

Le réglage de la largeur et de la hauteur peut être délicat si plusieurs marges et marges sont utilisées, mais en général, quelques pixels de distance ne devraient même pas avoir d’importance.

Démo en direct ici: http://jsfiddle.net/qo0dx0oo/ (fonctionne dans Firefox, mais pas IE ou Chrome, là le lien est mal positionné)

Correction pour Chrome et IE (fonctionne toujours dans FF): http://jsfiddle.net/qo0dx0oo/2/

Une autre option en utilisant , les positions CSS et certains jQuery ou JS :

HTML:

 
 
 
 1  
 
2
 
  

CSS:

 table tr td:first-child { position: relative; } a.rowLink { position: absolute; top: 0; left: 0; height: 30px; } a.rowLink:hover { background-color: #0679a6; opacity: 0.1; } 

Ensuite, vous devez donner une largeur, en utilisant par exemple jQuery:

  $(function () { var $table = $('table'); $links = $table.find('a.rowLink'); $(window).resize(function () { $links.width($table.width()); }); $(window).sortinggger('resize'); }); 

Ce code ci-dessous rendra toute votre table cliquable. Cliquez sur les liens dans cet exemple pour afficher le lien dans une boîte de dialog d’alerte au lieu de suivre le lien.

Le HTML:

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

  
 
 
 
 
Name
 
Description
 
Price
 
 
 
Edit
 
Apples
 
Blah blah blah blah
 
10.23
 
 
 
Edit
 
Bananas
 
Blah blah blah blah
 
11.45
 
 
 
Edit
 
Oranges
 
Blah blah blah blah
 
12.56
 
  

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 la magie:

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

Qu’est-ce qu’il fait, c’est quand une ligne est cliquée, une recherche est faite pour le href appartenant à une ancre. S’il en trouve un, l’emplacement de la fenêtre est défini sur href.

Il existe un moyen pratique de le faire techniquement avec la balise l’intérieur de

, qui peut être sémantiquement incorrecte (peut vous avertir par un navigateur), mais fonctionnera sans JavaScript/jQuery requirejs:

    Blah Blah 1234567 £158,000    /* 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 que l’astuce consiste ici à placer la balise comme dernier élément, sinon elle essaiera de prendre l’espace de la première cellule

.

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

Une solution beaucoup plus flexible consiste à cibler n’importe quoi avec l’atsortingbut data-href. Cela vous permet de réutiliser le code facilement à différents endroits.

   Col 1 Col 2   

Ensuite, dans votre jQuery, ciblez tout élément ayant cet atsortingbut:

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

Et n’oubliez pas de coiffer votre css:

 [data-href] { cursor: pointer; } 

Vous pouvez maintenant append l’atsortingbut data-href à n’importe quel élément et cela fonctionnera. Lorsque j’écris des extraits comme celui-ci, je les aime de manière flexible. N’hésitez pas à y append une solution vanille si vous en avez une.

Je sais que quelqu’un a déjà écrit à peu près la même chose, mais ma façon de faire est la bonne (div ne peut pas être l’enfant de A) et il vaut mieux utiliser des classes.

Vous pouvez imiter une table en utilisant CSS et faire un élément A la ligne

 
   cell 1   cell 2    

css:

 .table{display:table;} .tr{display:table-row;} .td{display:table-cell;} .tr:hover{background-color:#ccc;} 

Vous pouvez append le rôle de bouton à une ligne de table et Bootstrap changera le curseur sans aucune modification CSS. J’ai décidé d’utiliser ce rôle comme moyen de rendre facilement cliquable une ligne avec très peu de code.

Html

 
 
 
 
Cell 1
 
Cell 2
 
Cell 3
 
 
  

jQuery

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

Vous pouvez appliquer ce même principe pour append le rôle de bouton à n’importe quelle balise.

Vous pourriez donner un identifiant à la ligne, par exemple

puis utilisez jquery pour dire quelque chose comme:

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

Une option très simple (fonctionne également avec le ng-clic angular):

 
 
 
Click to show rowIndex
 
 
  

Exemple de travail ici

La réponse acceptée est géniale, mais je propose une petite alternative si vous ne voulez pas répéter l’URL sur chaque tr. Donc, vous mettez l’url ou href dans la table data-url et non le tr.

 
 
 
 
Blah Blah
 
1234567
 
£158,000
 
 
 
Blah Blah
 
1234567
 
£158,000
 
 
 
 

C'est aussi bien parce que vous n'avez pas besoin d'append l'atsortingbut click data à tous les tr. L'autre avantage est que nous n'utilisons pas de classe pour déclencher un clic, car les classes ne devraient être réellement utilisées que pour le style.

Voici un autre moyen …

Le HTML:

 
 
 
 
Blah Blah
 
1234567
 
£158,000
 
 
  

Le jQuery:

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

Pourquoi ne devrions-nous pas utiliser les balises “div” ….

 
  
 Table row of content here..