Выделение щелкнутой строки таблицы с чередованием HTML

Вот пример моей проблемы в jsFiddle.

У меня есть таблица с полосатыми строками, наложенная с помощью tr:nth-child(odd) в CSS, как это сделано в Twitter Bootstrap для класса table-striped. Я хочу выделить самую последнюю нажатую строку этой таблицы. Я делаю это со следующим Javascript:

$('#mytable tbody tr').live('click', function(event) {
    $clicked_tr = $(this);
    $clicked_tr.parent().children().each(function() {
        $(this).removeClass('highlight')
    });
    $clicked_tr.addClass('highlight');
});

Этот код отлично работает в таблице без полосатых строк. Но с полосатыми рядами цвет фона класса highlight не будет переопределять цвет фона класса table-striped. Почему это? И как я могу заставить его работать?

Ответ 1

http://jsfiddle.net/iambriansreed/xu2AH/9/

.table-striped class

.table-striped tbody tr.highlight td { background-color: red; }

... и очиститель jQuery:

$('#mytable tbody tr').live('click', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

Обновление: .live() с тех пор устарело. Используйте .on().

$('#mytable').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

Исправлено: http://jsfiddle.net/iambriansreed/xu2AH/127/

Ответ 2

Увеличить спецификацию .highlight

Подробнее "Специфика CSS", прочитав эту статью и проверив демо в этом ответить

//your normal green has "023"
//.table-striped  010
//tbody           001
//tr              001
//:nth-child(odd) 010 
//td              001 = 023
.table-striped tbody tr:nth-child(odd) td {
    background-color: green;
}

// your highlight only has "010"
//thus it can't take precedence over the applied style
.highlight{
    background-color: red
}

//a more specific highlight =  "033" will take precedence now
//.table-striped  010
//tbody           001       
//tr              001       everything is about the same except
//.highlight      010   <-- an added class can boost specificity
//:nth-child(odd) 010 
//td              001 = 033
.table-striped tbody tr.highlight:nth-child(odd) td {
    background-color: red;
}

Ответ 3

Это намного проще, просто используйте классы bootstrap css (например .info.warning.error или .success), чтобы переключаться между выбранной строкой и не выбирать. У них есть все состояния для строки.

Я использовал это, основываясь на ответе @iambriansreed:

$('#mytable tbody tr').live('click', function(event) {
    $(this).addClass('info').siblings().removeClass('info');
}

Ответ 4

Просто отредактируйте класс Bootstrap .table-striped CSS:

.table-striped tbody tr:nth-child(odd),
.table-striped tbody tr:nth-child(odd) th {
    background-color: #f9f9f9;
}

.table-striped tbody tr:nth-child(even){
    background-color: yellow;
}

Удалите весь стиль td, который вы не хотите. Затем он работает.

Когда вы нажимаете на строку, этот стиль также должен применяться:

.selected { background-color:#2f96b4 !important; }

Он не будет работать без !important.

Ответ 5

Насколько я понимаю:

$('#mytable tbody tr').live('click', function(event) {
    $clicked_tr = $(this);
    $('#mytable tbody tr').removeClass("highlight");
    $clicked_tr.addClass('highlight');
});