Установить текущий цвет фона колокола

Question

Как изменить цвет фона только на те строки, которые нажали, в приведенном ниже коде он не очищает цвет фона, который был выбран в предыдущей строке.

var tr = $('#webgrid_id').find('tr'); 
    tr.bind('click', function (event) { 
     $("tr").click(function() { $(this).css('background', 'yellow'); }); 
}); 

Answer 1

Demo

You может упростить его, используя класс

.yellow{ 
    background: yellow; 
} 

_{Добавьте выше <style> или CSS файл}

---

$('#webgrid_id').on('click','tr',function() { 
    $('tr.yellow').removeClass('yellow'); 
    $(this).addClass('yellow'); 
}); 

или как @A. Wolff предлагает передать этот (более оптимизированный и улучшенный): http://jsfiddle.net/12mze843/1/

Кроме того, я вижу click событие внутри безвыходном - нет необходимости гнездования этих событий.

Answer 2

попытка ниже кода

var tr = $('#webgrid_id').find('tr'); 
 

 
    tr.bind('click', function (event) { 
 
     tr.css('background',''); 
 
     $("tr").click(function() { 
 
     $(this).css('background', 'yellow'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="webgrid_id"> 
 
    <tbody> 
 
    <tr> 
 
     <td>a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>b</td> 
 
    </tr> 
 
    <tr> 
 
     <td>c</td> 
 
    </tr> 
 
    </tbody> 
 

 
</table>

Answer 3

Вы могли бы сохранить предыдущую нажатую строку в переменной и изменить его обратно цвет старого цвета, когда другой ряд щелкают, как это:

var prevTr = null; 
var tr = $('#webgrid_id').find('tr'); 
prevTr = tr; 
tr.bind('click', function (event) { 
    $("tr").click(function() { 
    $(this).css('background', 'yellow'); 
    $(prevTr).css('background', 'white'); 
    }); 
}); 

Answer 4

Просто дайте класс к нему и изменить этот класс, если нажав

$("head").append("<style type='text/css'>.inYellow{background-color:yellow;}</style>"); 

$("tr").on("click", function(){ 
    $(this).toggleClass("inYellow"); 
}); 

Live example.

Answer 5

var tr = $('#webgrid_id').find('tr'); 
 
tr.bind('click', function(event) { 
 
    $(this).css('background', 'yellow') 
 
    .siblings("tr").css('background', '#fff'); 
 
});

tr td { 
 
    font-size: 48px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<table id="webgrid_id"> 
 
    <tbody> 
 
    <tr> 
 
     <td>a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>b</td> 
 
    </tr> 
 
    <tr> 
 
     <td>c</td> 
 
    </tr> 
 
    </tbody> 
 

 
</table>

Answer 6

Вот демо: https://jsfiddle.net/erkaner/4mf61j5s/1/

$('body').on('click', 'tr', function (event) { 
     $('#webgrid_id tr').removeClass('clickedrow');//clear all highlights 
     $(this).toggleClass('clickedrow'); 
}); 

И вам нужно иметь этот стиль:

<style> 
    .clickedrow {background-color:yellow;} 
</style>