CODEWITHSUNDEEP
javascriptjqueryhtml
cucuru
cucuru

Reputation: 25

find tr with property in table from index

I want to find all tr in my table with some property, starting in another tr, I cant find how to:

$(document).on('click', '#myTable tr', function(e) {
  var index = $(this).index();
  alert(index);
  //find tr with td label class myIcon
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table id="myTable">
  <tr data-value=1><td><label class="myIcon3"></label>td</td></tr>
  <tr data-value=2><td><label class="myIcon2"></label>td</td></tr>
  <tr data-value=1><td><label class="myIcon"></label>td</td></tr>
  <tr data-value=2><td><label class="myIcon2"></label>td</td></tr>
  <tr data-value=1><td><label class="myIcon"></label>td</td></tr>
  <tr data-value=2><td><label class="myIcon2"></label>td</td></tr>
  <tr data-value=1><td><label class="myIcon3"></label>td</td></tr>
  <tr data-value=2><td><label class="myIcon2"></label>td</td></tr>
</table>

I want to get the tr with td label class myIcon starting from clicked tr?

How can I do this?

Upvotes: 0

Views: 717

Answers (3)

savinger
savinger

Reputation: 6714

Nenad's answer is correct, but to generalize the solution you can use good old fashioned vanilla javascript to filter an array.

$(document).on('click', '#myTable tr', function(e) {
  var $tr = $(this);

  // Make an array 
  var nextSiblings = $tr.nextAll().toArray();

  // Filter the array
  var filteredSiblings = nextSiblings.filter(

    // Pass a function that returns `true` when you have a matching element
    function(el, i) {
      return parseInt(el.getAttribute('data-value'), 10) === 1;
    }
  )
});

Upvotes: 0

Samarth
Samarth

Reputation: 773

I guess changing script block to something like this might help

<script>
 $(document).on('click', '#myTable tr', function(e) {
     var index = $(this).index();
     var trs = $('#myTable tr');
     for(var i=index;i<trs.length;i++){
         if(trs[i].getAttribute('data-value')=='1'){
             var allTrsWithLabelMyIcon = $(trs[i]).find('td>label.myIcon'); 
            //Variable containing all labels having the class myIcon where data-value for tr is 1
             console.log(i,allTrsWithLabelMyIcon);
         }
     }
     alert(index);
 });
</script>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122087

You can use nextAll() with :has() to check if td that has label with myIcon class exists in that row.

$(document).on('click', '#myTable tr', function() {
  // First remove background from all siblings but you don't need this
  $(this).siblings().andSelf().css('background', 'none');
  
  // Selector
  $(this).nextAll('tr:has(td > label.myIcon)').css('background', 'red')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable"> 
<tr data-value=1> <td> <label class ="myIcon3"> </label>td</td></tr>
<tr data-value=2> <td> <label class ="myIcon2"> </label>td</td></tr>
<tr data-value=1> <td> <label class ="myIcon"> </label>td</td></tr>
<tr data-value=2> <td> <label class ="myIcon2"> </label>td</td></tr>
<tr data-value=1> <td> <label class ="myIcon"> </label>td</td></tr>
<tr data-value=2> <td> <label class ="myIcon2"> </label>td</td></tr><tr data-value=1> <td> <label class ="myIcon3"> </label>td</td></tr>
<tr data-value=2> <td> <label class ="myIcon2"> </label>td</td></tr>
</table>

Upvotes: 1

Related Questions