Keyur Keyur - 5 months ago 16
jQuery Question

Toggle(Hide/Show) <tr> using jQuery on specific attibute value

I want to hide the

<tr>
based on the value of the attribute named
status_id
. And I'm using jQuery datatable.

This is what I have tried, but not working.

This is my table, from which, I want to toggle the
<tr>
with attribute
status_id
in
<span>


<button id="hide-tasks" class="hide-tasks" type="button">Toggle</button>
<table id='tbl_taskList'>
<tbody>
<tr role="row" class="odd">
<td style="padding-right: 5px;">
<span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip badge stat-adjust btn-list fa fa-adjust" status_id="4" move-left="500">&nbsp;</span>
</td>
</tr>
</tbody>




And this is the js for that,

$(document).on('click', '.hide-tasks', function (e) {
var toggleVal = [1, 9, 10, 11, 12];
var statusToggle = $(this).closest('tr').children('span').find('status_id');
if (statusToggle === toggleVal) {
statusToggle.toggle();
}
});


Where am I wrong?

Answer

Firstly status_id is an attribute of the span, so your use of find() is incorrect.

Secondly, the button is not within the table, so closest() will not find anything as it goes up the DOM. You would need a combination of next() and find(). You will also need to loop through the span element found in each tr using each()

Finally note that creating your own non-standard attributes will mean that your HTML is invalid. To store custom data with an element use data-* attributes.

From there you can use indexOf() to discover if the status-id is in the array, and toggle() the required element as needed. Try this:

var toggleValues = [1, 9, 10, 11, 12];

$(document).on('click', '.hide-tasks', function(e) {
  $(this).next('table').find('span').each(function() {
    var $el = $(this);
    $el.closest('tr').toggle(toggleValues.indexOf($el.data('status-id')) == -1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide-tasks" class="hide-tasks" type="button">Toggle</button>
<table id='tbl_taskList'>
  <tbody>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="1" move-left="500">1</span>
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="2" move-left="500">2</span>
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="9" move-left="500">9</span>
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="10" move-left="500">10</span>
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="15" move-left="500">15</span>
      </td>
    </tr>
  </tbody>

Comments