javascript - jquery dataTables 使我的 可点击但点击时不改变颜色

Question

现在我的<thead> <tr>正在变色为黄色，我想这个不要。

所以名字和地点需要可点击所以我使用:var tr = $("tbody tr");在我的 jsfiddle 示例中工作正常，所以颜色被删除使用:var tr = $("tbody tr");但我不知道为什么在我的本地代码中不起作用。

我可以创造一个条件来制作 thead tr 吗？不改变颜色？

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

有人对此有解决方案吗？

j查询:

$(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");
})

注意:- 我已经检查过了，它工作正常。