jquery dataTables使我的可点击，但不会在点击时改变颜色[英]jquery dataTables make my clickable but not change color on click 本文翻译自 user6446281 查看原文 2017-02-16 162 css/

right now my <thead> <tr> is changing color to yellow, i would like to this do not.

现在我的正在将颜色变为黄色,我想这不是。

so First name and Place need be clicklable so I used : var tr = $("tbody tr"); and works fine here in my jsfiddle sample, so the color was removed using: var tr = $("tbody tr"); but I don't know why is not working in my local code.

所以名字和地点需要点击,所以我使用:var tr = $(“tbody tr”);并在我的jsfiddle样本中正常工作,因此使用以下命令删除颜色:var tr = $(“tbody tr”);但我不知道为什么不在我的本地代码中工作。

can I create a condition to make the thead tr not change color?

我可以创建一个条件,使thead tr不会改变颜色?

sorry I think I was not clear in my question, the click event need happen and make the tr yellow, i just don't want to make the tr in thead yellow

对不起,我想我不清楚我的问题,点击事件需要发生并使tr黄色,我只是不想让the in the yellow

someone has a solution for this?

有人有解决方案吗?

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>

i tried:

 var tr = $("tbody tr");

and:

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

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

1 个解决方案

#1

Please check this code :-

请检查此代码: -

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

Use this code for your second query what you have asked in comment:-

使用此代码进行第二次查询您在评论中提出的问题: -

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

For your third comment:-

第三条评论: -

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

Note:- I had checked it and it's working fine.

注意: - 我检查了它,它工作正常。

#1