CODEWITHSUNDEEP
javascriptjqueryhtmltoggle
Keyur
Keyur

Reputation: 1111

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?

Upvotes: 1

Views: 181

Answers (2)

Dhara Parmar
Dhara Parmar

Reputation: 8101

Try:

1) Use $(this).closest('tr').children('span').find('span').attr('status_id') to get the status_id

2) as toggleVal is an array, you cant compare statusToggle which is string - with toggleVal - so use $.inArray

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 2

Related Questions