I have a table with nested rows that are dynamically created when a dropdown onchange event is fired. I'm having difficulty trying to dynamically add a class to the child table rows that are marked as labels. I set an attribute on the child rows data-childrow={l2.childRow}. When I try to use the query selector to find these rows to add the class it is always null no matter what I've tried. I'm sure there is a better way to do this than what I'm trying.

I was able to add the class to the parent row using a similar approach. It seems that at the time I'm checking for the attribute to add the class on the child rows, it doesn't exist yet.

Is there a way to add a class to the rows that are identified as label/header rows at the time they are being created?


handleStatusChange(e) {
    ...// irrevalent code removed from easier view 
    if(this.status === 'green') {
        var i = 0;
        var j = 0;
            if(item.levelone != rowData.key) i++; 
            var childRowIndex = JSON.stringify(i) + JSON.stringify(j);         
            if(rowData.key === item.levelone) {                     
                rowData.rowList.push({value:item.value, key:item.key, isLabel:!item.isLabel, childRow:childRowIndex}); 
            if(item.isLabel) {
                console.log('*************************************** isLabel is true');
                console.log('*************************************** childRowIndex ' + childRowIndex);
                const childRowHeader = this.template.querySelector(`tr[data-childrow="${childRowIndex}"]`);
                if(childRowHeader) {
                    this.template.querySelector(`tr[data-childrow="${childRowIndex}"]`).className = 'childRowHeading'; 


<template for:each={levelOne} for:item="l1" for:index="indexParent">
    <tr key={l1.key} data-parentrow={indexParent}>
                placeholder="--Please Select--"
                data-index={indexParent} >
    <template for:each={l1.rowList} for:item="l2" for:index="indexChild">
        <tr key={l2.key} data-childrow={l2.childRow}>
                <template lwc:if={l2.isLabel}>
                    <lightning-input type="checkbox" name="input2"></lightning-input>
            <td colspan="2">
                <template lwc:if={l1.showTxtInput}>
                    <lightning-input type="text" label="Notate..." value=""></lightning-input>

1 Answer 1


Changes you make to the data won't render in HTML until the next lifecycle processes. That's why querySelector can't find the elements. Instead, just add whatever additional properties you need into the row data in the rowList array, then you can bind those properties directly to the template.

  • Thank you @sfdcfox Commented Feb 29 at 17:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .