Изменение цвета строки с нажатой таблицей с помощью jQuery

Мне нужна ваша помощь,

Как я могу, используя jQuery,

Измените цвет фона для выбранной строки в моей таблице (в этом примере можно использовать выделенный класс css

и если эта же строка снова нажата, измените ее на свой цвет по умолчанию (белый), выберите класс css "неосвещенный"

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.highlighted {
    background: red;
}
.nonhighlighted {
    background: white;
}
</style>

</head>

<body>

<table id="data" border="1" cellspacing="1" width="500" id="table1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>

Ответ 1

.highlight { background-color: red; }

Если вы хотите несколько вариантов выбора

$("#data tr").click(function() {
    $(this).toggleClass("highlight");
});

Если вы хотите выбрать только одну строку в таблице за раз

$("#data tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#data tr").removeClass("highlight");
    if(!selected)
            $(this).addClass("highlight");
});

Также обратите внимание, что ваш тег TABLE имеет 2 идентификатора, вы не можете этого сделать.

Ответ 2

Создайте класс css, который применяет цвет строки, и используйте jQuery для включения/выключения класса:

CSS

.selected {
    background-color: blue;
}

JQuery

$('#data tr').on('click', function() {
    $(this).toggleClass('selected');
});

Первый клик добавит класс (сделав фоновый цвет синим), а следующий клик удалит класс, возвращая его к тому, что было до этого. Повторите!

В отношении двух классов CSS, которые у вас уже есть, я бы изменил класс .nonhighlighted, который будет применяться ко всем строкам таблицы по умолчанию, затем включите и выключите .highlighted:

<style type="text/css">

.highlighted {
    background: red;
}

#data tr {
    background: white;
}

</style>

$('#data tr').on('click', function() {
    $(this).toggleClass('highlighted');
});

Ответ 3

Здесь возможно решение, которое будет окрашивать всю строку для вашей таблицы.

CSS

tr.highlighted td {
    background: red;
}

JQuery

$('#data tr').click(function(e) {
    $('#data tr').removeClass('highlighted');
    $(this).toggleClass('highlighted');   
});

Демо: http://jsfiddle.net/jrthib/HVw7E/2/

Ответ 4

в вашем css:

.selected{
    background: #F00;
}

в jquery:

$("#data tr").click(function(){
   $(this).toggleClass('selected');
});

В принципе вы создаете класс и добавляет/удаляет его из выбранной строки.

Btw, вы могли бы показать больше усилий, там вообще нет css или jquery/js в вашем коде xD

Ответ 5

jQuery:

$("#data td").toggle(function(){
    $(this).css('background-color','blue')
},function(){
    $(this).css('background-color','ur_default_color')
});

Ответ 6

Удалить второе объявление id таблицы:

<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>

Ответ 7

Я не эксперт в JQuery, но у меня такой же сценарий, и я могу сделать следующее:

$("#data tr").click(function(){
   $(this).addClass("selected").siblings().removeClass("selected"); 
});

Стиль:

<style type="text/css">

.selected {
    background: red;
}

</style>

Ответ 8

Выделите { background-color: papayawhip; }

$("#table tr").click(function() {    
 $("#table tr").removeClass("highlight");
            $(this).addClass("highlight");
});