it-swarm.com.de

Wählen Sie die Tabellenzeile aus und markieren Sie sie mit Twitter Bootstrap

Ich verwende die Tabelle Twitter Bootstrap mit anklickbaren Zeilen, die hervorgehoben werden, wenn der Mauszeiger darüber bewegt wird (ich kann die Schwebefunktion entfernen, wenn dies einfacher ist.) Ich möchte, dass die ausgewählte Zeile bis zu einer anderen hervorgehoben bleibt Zeile wird angeklickt oder erneut angeklickt.

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

und der Tisch

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

Ich habe diesen Code in der JS ausprobiert, aber nicht funktioniert

$(this).addClass('highlight').siblings().removeClass('highlight');
18
Jabda

Du bist ziemlich nah dran. Das Targeting der Klasse .clickable-row Für Ihr $("#myTable").on(...) -Ereignis und die Verwendung der Klasse .active Von Bootstrap sollte für Sie funktionieren:

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');
});

Und ein Bootply-Beispiel

Hinweis: Wenn Sie .table-hover Auf Ihrem Tisch belassen, müssen Sie eine andere Klasse als .active Verwenden, z. B. .bg-info (Dies wäre ein blau) hightlight )

Um eine Markierung aus der Zeile zu entfernen (dh erneut zu klicken), überprüfen Sie, ob die Zeile die Klasse enthält, und entfernen Sie sie:

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

Originalinformationen finden Sie in der Antwort von @ BravoZulu.

47
Tim Lewis

Versuchen:

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

Um die gemalte Reihe einer Farbe anzuzeigen und anzuzeigen, dass sie ausgewählt ist, können Sie data-row-style = 'formatterRowUtSelect'

In Ihrem Code können Sie die folgende Methode hinzufügen:

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

Vergessen Sie nicht, die CSS für die ausgewählte Zeile zu erstellen:

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

Ich hoffe es dient dir, Grüße.

2
RyuSaky

ich habe dieses Skript auf Bootstrap-Tabelle verwendet.

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