设置当前单击行背景颜色

Question

如何仅将背景颜色更改为单击的行，在下面的代码中，它不会清除上一行单击的背景颜色。

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

Answer 1

<强> Demo

您可以使用类

来简化它

.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/

另外，我在bind中看到一个click事件 - 没有必要嵌套这些事件。

Answer 2

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 3

尝试以下代码

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 4

您可以将之前单击的行保存在变量中，并在单击另一行时将其颜色更改为旧颜色，如下所示：

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 5

只需给它一个课程，点击

即可更改此课程

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

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

Live example.

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>