CODEWITHSUNDEEP
javascriptjqueryhtml
Briefkasten
Briefkasten

Reputation: 1994

Select tr and its "tr childs" - find jquery selector

My table looks like the following:

<table class="highlight">
 <tbody>
    <tr class="sortable"><td>first row</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to row one)</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to row one)</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to row one)</td></tr>
    <tr class="sortable"><td>second row</td></tr>
    <tr class="sortable"><td>third row</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to third row)</td></tr>
    <tr class="sortable"><td>fourth row</td></tr>
    <tr class="sortable"><td>fifth row</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to fifth row)</td></tr>
    <tr class="sortable nondraggable sub"><td>collasped row with further informations (belongs to fifth row)</td></tr>
 </tbody>

I want to select each row with its "collapsed" childs.

For clarification: https://jsfiddle.net/4k1a6xp6/4/

I think it can be solved by using the child ">" selector of jquery. So we can use jQuery("table.highlight").find("tr.sortable > ??? ").

The ??? should select the child trs with "sortable nondraggable sub" until the next parent row is reached.

How can I accomplish this?

[EDIT] One possible solution based from answers: https://jsfiddle.net/4k1a6xp6/6/

Upvotes: 1

Views: 88

Answers (2)

semuzaboi
semuzaboi

Reputation: 5172

OK, as i understand you want to select both the Parent row and the collapsed rows.

Check out this fiddle below.

 $('tr.sub').css('background-color', 'yellow');

var sibling = $('tr.sub').prev();
//console.log(sibling);


$(sibling).each(function(index, item) {
  console.log(item);
  if (!$(item).hasClass('sub')) {
    $(item).css('background-color', 'blue');
  }

});

It assumes that your 'parent' row does not have any class and the check is made on the parent row's absence of the .sub class.

Colors are different just for highlighting purposes. If you could just add a class to the parent row, this will be more easier :)

Code snippet 

$('tr.sub').css('background-color', 'yellow');

var sibling = $('tr.sub').prev();
//console.log(sibling);
var solorows  = $('tr.sortable').next('.sortable:not(.nondraggable.sub)');

$(solorows).each(function(index,item){
//console.log(item);

if($(item).next('tr.nondraggable.sub')){
 $(item).css('background-color','red')
}
});

$(sibling).each(function(index, item) {
 // console.log(item);
  if (!$(item).hasClass('sub')) {
    $(item).css('background-color', 'yellow');
  }

});
.highlight {
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="highlight">
  <tbody>
    <tr class="sortable">
      <td>first row</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to row one)</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to row one)</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to row one)</td>
    </tr>
    <tr class="sortable">
      <td>second row</td>
    </tr>
    <tr class="sortable">
      <td>third row</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to third row)</td>
    </tr>
    <tr class="sortable">
      <td>fourth row</td>
    </tr>
    <tr class="sortable">
      <td>fifth row</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to fifth row)</td>
    </tr>
    <tr class="sortable nondraggable sub">
      <td>collasped row with further informations (belongs to fifth row)</td>
    </tr>
  </tbody>

Upvotes: 0

T J
T J

Reputation: 43156

Select the parent row (with a specific selector as shown below, or while iterating over each of them, as per your requirement) then use nextUntil with :not selector. For example:

$('tr.sortable').first().nextUntil('tr.sortable:not(.nondraggable.sub)')

Upvotes: 1

Related Questions