Question

现在我的<thead> <tr>正在将颜色变为黄色，我想这不是。

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

我可以创建条件使thead tr不变色吗？

抱歉，我觉得我不清楚我的问题，点击事件需要发生并使tr黄色，我只是不想让the in the yellow黄色

有人有解决方案吗？

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

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

jquery dataTables使我可点击但不点击更改颜色

1 个答案: