Jump to content
mongoose00318

Using selectors to find children <th>

Recommended Posts

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? 

Share this post


Link to post
Share on other sites

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);
		});
	});

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
Posted (edited)

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 by mongoose00318

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.