Выберите строку таблицы и сохраните ее, используя Twitter Bootstrap

Я использую таблицу Twitter Bootstrap со щелчками, которые выделяются при зависании (я могу избавиться от функции наведения, если это упростит). Я хочу, чтобы выбранная строка оставалась подсвеченной до тех пор, пока не будет нажата другая строка или она не будет повторно сделана.

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

а таблица

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

Я пробовал этот код в JS, но не работал

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

Ответ 1

Вы совсем близко. Таргетирование класса .clickable-row на событие $("#myTable").on(...) и использование класса Bootstrap .active должно работать для вас:

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

И Пример загрузки

Примечание. Если вы оставили .table-hover в своей таблице, вам придется использовать другой класс, чем .active, например .bg-info (который был бы синим Hightlight)

Чтобы удалить выделение из строки (например, нажмите еще раз), проверьте, имеет ли класс класс и удаляет его:

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

См. ответ @BravoZulu для получения исходной информации.

Ответ 2

Try:

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

Ответ 3

Чтобы отобразить окрашенную строку цвета, указав, что она выбрана, вы можете использовать data-row-style = 'formatterRowUtSelect'

Внутри кода вы можете добавить этот метод:

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

Не забудьте создать css для выбранной строки:

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

Надеюсь, вам это послужит, Приветствия.

Ответ 4

Я использовал этот script в начальной загрузке.

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