web-dev-qa-db-fra.com

Sélectionnez la ligne de la table et maintenez-la en surbrillance avec Twitter Bootstrap

J'utilise Twitter Bootstrap avec les lignes cliquables mises en surbrillance lors du survol (je peux supprimer la fonctionnalité de survol si cela simplifie cette opération). Je veux que la ligne sélectionnée reste en surbrillance jusqu'à ce qu'une autre la ligne est cliquée ou recliquée.

    $( document ).ready(function() {
        $('#myTable').on('click', 'tbody tr', function(event) {
            //  console.log("test ");                   
        });

et la table

<table class="table table-bordered table-hover" id="myTable">
    <tbody>
        <tr>
        <tr class='clickable-row'>

J'ai essayé ce code dans le JS mais je n'ai pas fonctionné

$(this).addClass('highlight').siblings().removeClass('highlight');
jquerycsstwitter-bootstraptwitter-bootstrap-3
18
Jabda

Tu es assez proche. Cibler la classe .clickable-row Sur votre événement $("#myTable").on(...) et utiliser la classe .active De Bootstrap devrait fonctionner pour vous:

HTML:

<table class="table table-bordered" id="myTable">
  <tr class="clickable-row">
    <th>Example</th>
  </tr>
   <tr class="clickable-row">
    <th>Example 2</th>
  </tr>
</table>

Javascript:

$('#myTable').on('click', '.clickable-row', function(event) {
  $(this).addClass('active').siblings().removeClass('active');
});

Et un exemple Bootply

Remarque: Si vous avez laissé .table-hover Sur votre table, vous devrez utiliser une classe différente de .active, Telle que .bg-info (Qui serait un bleu). hightlight )

Pour supprimer une surbrillance de la ligne (cliquez à nouveau), vérifiez si la ligne a la classe et supprimez-la:

$('#myTable').on('click', '.clickable-row', function(event) {
  if($(this).hasClass('active')){
    $(this).removeClass('active'); 
  } else {
    $(this).addClass('active').siblings().removeClass('active');
  }
});

Voir la réponse de @ BravoZulu pour des informations originales.

47
Tim Lewis

Essayer:

$(".clickable-row").click(function(){
    if($(this).hasClass("highlight"))
        $(this).removeClass('highlight');
    else
        $(this).addClass('highlight').siblings().removeClass('highlight');
})
7
BravoZulu

Pour afficher la ligne peinte d’une couleur indiquant qu’elle est sélectionnée, vous pouvez utiliser data-row-style = 'formatterRowUtSelect'

Dans votre code, vous pouvez ajouter cette méthode:

formatterRowUtSelect = function (row, index) {
    if (row.fieldOfMyObject == $ ('#fieldOfMyObject'). val ())
        return {classes: 'row-selected'};
    return {};
}

N'oubliez pas de créer le css pour la ligne sélectionnée:

.row-selected {
    background-color: #a9f0ff !important;
    font-weight: bold;
}

J'espère que cela vous sert, salutations.

2
RyuSaky

j'ai utilisé ce script sur bootstrap-table.

$('#tb-pegawai').on('change', 'tr' , function (event) {
            if($('.selected')){ // } })
0
Sumari Marco