jQuery dataTables使我 <thead><tr> 可点击但不能改变颜色

Question

现在我的<thead> <tr>正在将颜色更改为黄色，但我不想这样做。

因此， 名字和地点必须是可点击的，因此我使用了： var tr = $("tbody tr"); 并在我的jsfiddle示例中正常工作，因此使用以下颜色删除了颜色： var tr = $("tbody tr"); 但我不知道为什么在我的本地代码中不起作用。

我可以创建一个条件来使thead tr不变的颜色吗？

抱歉，我想我不清楚我的问题，点击事件需要发生，并将tr变为黄色，我只是不想将thead变为黄色

有人对此有解决方案吗？

jQuery的：

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/crcCiZXZfm?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    columns: [{
      data: 'name'
    }, {
      data: 'place'
    }],"fnDrawCallback": function( oSettings ) {

       var tr = $(" tr");
      tr.one("click", function() {
        $(this).toggleClass('row-selected');
        tr.off('click');
        //$("#example thead").find('tr').removeClass("row-selected");
      })
        }
  });

  $('#sel1').change(function() {
    if (this.value === "All") {
      table
        .columns(1)
        .search('')
        .draw();
    } else {
      table
        .columns(1)
        .search(this.value)
        .draw();
    }
  });
});

CSS：

.row-selected {
  background-color: yellow !important;
  color: black !important;
}

HTML：

<div class=" dashboard">
  <div class="col-md-8 no-padding">
    <div class="form-group col-md-4 no-padding">
      <select class="form-control" id="sel1">
        <option value="Filter by">Filter by country </option>
        <option value="All">All</option>
        <option value="China">China</option>
        <option value="EUA">EUA</option>
        <option value="Spain">Spain</option>
      </select>
    </div>
  </div>

  <br>
  <br>
  <table id="example" class="display" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>First name</th>
        <th>Place</th>

      </tr>
    </thead>
  </table>

我试过了：

 var tr = $("tbody tr");

和：

 $("#example thead").find('tr').removeClass("row-selected");

jsfiddle： http : //jsfiddle.net/f7debwj2/6/

Answer 1

请检查此代码：-

 var tr = $("tbody tr");  // check change here
 tr.one("click", function() {
 $(this).toggleClass('row-selected');
 tr.off('click');
 //$("#example thead").find('tr').removeClass("row-selected");
 })

使用此代码进行第二次查询，您在注释中的要求是：

 var tr = $("tbody tr");
 tr.on("click", function() {
     $(tr).not(this).removeClass('row-selected');
     $(this).toggleClass('row-selected');
     //tr.off('click');
     //$("#example thead").find('tr').removeClass("row-selected");
 })

对于您的第三条评论：

var tr = $("tbody tr");
tr.one("click", function() {
     $('tbody tr').toggleClass('row-selected');
     tr.off('click');
     //$("#example thead").find('tr').removeClass("row-selected");
})

注意：-我已经检查过了，并且工作正常。