web-dev-qa-db-fra.com

Comment rendre bootstrap rangées de tables cliquables?

Je peux le pirater moi-même, mais je pense que bootstrap a cette capacité.).

csshtml5twitter-bootstrap
66
rjurney

Utiliser jQuery est assez trivial. La v2.0 utilise la classe table sur toutes les tables.

$('.table > tbody > tr').click(function() {
    // row was clicked
});
67
Terry

Il y a un plugin javascript qui ajoute cette fonctionnalité au bootstrap.

Quand rowlink.js est inclus, vous pouvez faire:

<table data-link="row">
  <tr><td><a href="foo.html">Foo</a></td><td>This is Foo</td></tr>
  <tr><td><a href="bar.html">Bar</a></td><td>Bar is good</td></tr>
</table>

La table sera convertie de sorte que toute la ligne puisse être cliquée au lieu de la première colonne uniquement.

57
Jasny - Arnold Daniels

Ce code transforme n'importe quelle ligne bootstrap qui a data-href attribut défini dans un élément cliquable

Remarque: data-href attribut est un attribut tr valide (HTML5), href attribut sur l’élément tr ne le sont pas.

$(function(){
    $('.table tr[data-href]').each(function(){
        $(this).css('cursor','pointer').hover(
            function(){ 
                $(this).addClass('active'); 
            },  
            function(){ 
                $(this).removeClass('active'); 
            }).click( function(){ 
                document.location = $(this).attr('data-href'); 
            }
        );
    });
});
23
Simmoniz

Je vous montre mon exemple avec les fenêtres modales ... vous créez votre modal et lui donnez ensuite un identifiant. Dans votre tableau, vous avez la section tr, ajoutez la première ligne que vous voyez ci-dessous (n'oubliez pas de définir cette

<tr onclick="input" data-toggle="modal" href="#the name for my modal windows" >
 <td><label>Some value here</label></td>
</tr>
6
matouuuuu
<tr height="70" onclick="location.href='<%=site_adres2 & urun_adres%>'"
    style="cursor:pointer;">
4
alpc

Peut-être essayez-vous d’attacher une fonction lorsque vous cliquez sur les lignes du tableau.

var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
    rows[i].onclick = functioname(); //call the function like this
}
0
Starx

Vous pouvez utiliser de cette manière en utilisant bootstrap css. Supprimez simplement la classe active si elle est déjà affectée à une ligne et affectez-la à la ligne actuelle.

    $(".table tr").each(function () {
        $(this).attr("class", "");
    });
    $(this).attr("class", "active");
0
Naren