Using selectors to find children <th>

[mongoose00318]

My goal is to find those tags with a class of .ht_nestingParent and then add a blank table row above the .ht_nestingParent and then a blank row under the last of it's children rows; which are the rows below that lack the .ht_nestingParent class.

Here is my HTML

<tbody>
    <tr>
        <th class="ht_nestingLevels ht_nestingParent"><div class="relative"><span class="rowHeader">1</span>
                <div class="ht_nestingButton ht_nestingCollapse"></div>
            </div></th>
        <td class="">7-ELEVEN</td>
        <td class="">22971161</td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
    </tr>
    <tr>
        <th class="ht_nestingLevels ht__highlight"><div class="relative"><span class="ht_nestingLevel_empty"></span><span class="rowHeader">2</span></div></th>
        <td class="current highlight"></td>
        <td class=""></td>
        <td class="">A</td>
        <td class="">SOUTH MOD 67 ID FACE||7-11 OKLAHOMA COLORS||95-5/8 X 96-3/4||DWG: SO1067RF.OK (102138)||</td>
        <td class="">4</td>
        <td class="">2020-02-20</td>
        <td class="">2020-01-24</td>
    </tr>
    <tr>
        <th class="ht_nestingLevels ht_nestingParent"><div class="relative"><span class="rowHeader">3</span>
                <div class="ht_nestingButton ht_nestingCollapse"></div>
            </div></th>
        <td class="">7-ELEVEN</td>
        <td class="">22983321</td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
        <td class=""></td>
    </tr>
</tbody>

I'm so new to complex jQuery..or what seems complex to me. Here's a function I was trying to write using the .each method.

$(document).ready(function() {
    $('.htCore tbody tr th.ht_nestingParent').each(function (i) {
        $val = $(this).html;
        alert($val);
    });
});

I don't think my function is right...it's not doing anything. But, isn't there a way to use selectors more thoroughly than I currently am to find the <th> with .ht_nestingParent and the subsequent children below it until it finds the next <th> with .ht_nestingParent? 

[mongoose00318]

What about something like this?

    $(document).ready(function() {
		$('.htCore tbody tr th.ht_nestingParent').each(function($index, $value) {
			console.log($(this).nextUntil('th.ht_nestingParent').html);
		});
	});

 

[requinix]

Are you able to change the markup of the page? Not much: to use multiple tbody elements, one for each group of rows. Visually it'll probably look the same as before, and reorganizing the rows like that would make this much easier.

[mongoose00318]

Maybe...but it would require modifying the core JS which is probably above what I can do at the moment. I'm using handsontable. I managed to get a lot of what I wanted done using CSS3 selectors. Here's my CSS3:

	<style type="text/css">
		#productionLogTable {
			font-size:11px;
			color: black;
			font-weight: bold;
		}
		
		th.ht_nestingLevels {
			background-color: lightgray;
			font-weight: bold;
		}
		th.ht_nestingLevels.ht_nestingParent {
			color: black;
			font-weight: bold;
			font-size: 12px;
			background-color: white;
		}
		th.ht_nestingParent ~ td {
			font-size: 12px;
			font-weight: bold;
			padding: 5px 0px 10px 10px;
			color: black;
			background-color: white;
		}
		.htCore tbody tr th:not(.ht_nestingParent) ~ td {
			padding-bottom: 24px;
		}
	</style>

The only problem I'm having is with the last part:

.htCore tbody tr th:not(.ht_nestingParent) ~ td {
    padding-bottom: 24px;
}

What I'm trying to get that to say is affect the last row before the next

<th class="ht_nestingLevels ht_nestingParent">

to have a little bit of padding at the bottom...basically to space out the grouping of nested rows. Here's a screenshot of it so far.

https://imgur.com/a/GlWstfV

So lines 56, 59, 61, etc. would have the padding.

Edited April 3, 2020 by mongoose00318

[kicken]

Sounds like all you really need is a class on the parent row's <tr> tag that you can target to apply your padding.  That is relatively easy to do by just querying for the .ht_nestingParent cells, getting their parent and adding a class.

jQuery(function($){
	$('.ht_nestingParent').each(function(){
  		$(this).parent().addClass('nestingParentRow');
  	});
});

The you could apply padding to the cells of that row to space it out from the previous section with a little CSS

.nestingParentRow td {
  padding-top: 15px;
}

.nestingParentRow:first-child td {
  padding-top: 0;
}