Jquery Tableorter сортировки строк

Question

Мне нужен фрагмент, чтобы выделить строку таблицы при наведении мыши. Я не смог добавить эту функциональность, если он имеет плагин jquery tablesorter.

Answer 1

Не затрагивая zebra widget TableSorter, вы можете добавить некоторые дополнительные CSS в TableSorter / style.css

table.tablesorter tr.even:hover td,
table.tablesorter tr.odd:hover td {
    background-color: blue;
}

Answer 2

Чтобы выделить строки в таблице, вы можете использовать:

$(document).ready(function() {
    $("table").tablesorter();
    $('table tr').has(':not(th)').hover(
        function(){
            $(this).data('currColor',$(this).css('background-color'));
            $(this).css('background-color','#cdd');
        },
        function(){
            $(this).css('background-color',$(this).data('currColor'));
        }
    );
});

http://jsfiddle.net/userdude/gjm6g/2/

Answer 3

Я хотел дополнительно проанализировать метаданные строки и отобразить наложение. Я нашел этот вопрос, но решения с таблицей не работали должным образом. Я нашел рабочее решение из этого сообщения в блоге 2009 года:

http://rogtopia.com/entries/jquery-js/tablesorter-hover-with-custom-widget

Повторно добавьте курсор, создав виджет табличной сортировки.

<script type="text/javascript">
$(document).ready(function () {
    // tablesorter widget to setup rollovers on table rows
    $.tablesorter.addWidget({
        id: "hover",
        format: function(table) {
            $('tr',$(table)).mouseover(function () {
                $(this).addClass('hover');
            }).mouseout(function () {
                $(this).removeClass('hover');
            });
        }
    });
    // then instantiate your tablesorter calling the hover widget
    $('.tablesorter').tablesorter({widthFixed: true, widgets: ['hover'] });
});
</script>

Answer 4

Вы можете попробовать использовать плагин jQuery.Colorize вместе с таблицей сортировки. Это позволит вам сохранить альтернативные цвета. http://jquerycolorize.blogspot.com/2012/01/how-to-use-tablesorter-plugin-with.html

Кстати, если вы используете asp.net mvc, лучшим вариантом будет использование MvcContrib Grid.