Accessing child rows' cells after creating them

yairam

Hello! I need to accomplish the following task: i need to display a table where its rows represent categories and some of them have child rows - subcategories. I chose to use datatables child rows, because they have functionality that I want subcategories to have. BUT I have a question: how to access children rows that were created to update their content via AJAX?

My code for creating children rows for parent rows that have kids (class = "js_table_object_row_parent" and data-children = "information about kids"):

var widthArray = []
$("#js_skills_functional_table").children("thead").children("tr").children("th").each(function(){
    widthArray.push($(this).width());
});

$("#js_objects_functional_table").DataTable().rows(".js_table_object_row_parent").every(function(){
    var rowItself = this;
    var rowElement = $(this.node())
    var dataChildrenString = rowElement.attr("data-children")
    if (dataChildrenString.length != 0) {
        var dataChildrenArray = dataChildrenString.split(";")
        var dataChildrenArrayofObjects = [];
        for (var i = 0; i < dataChildrenArray.length; i++) {
            var element = JSON.parse(dataChildrenArray[i]);
            dataChildrenArrayofObjects.push(element)
        }
        var rowWidth =  $("#js_objects_functional_table").children("thead").children("tr").width()
                
        displayRowChildrenobjects(rowItself, dataChildrenArrayofObjects, widthArray, rowWidth)
        
    }
})

function displayRowChildrenobjects(rowItself, dataChildrenArrayofObjects, widthArray, rowWidth){
    var resultString = '<table class="js_table_objects_children" style="width: '+ rowWidth +'; background: #EDEDED">'
    var k = 0;
    for (var i = 0; i < dataChildrenArrayofObjects.length; i++) {
        var element = dataChildrenArrayofObjects[i];
        var objectId = element.objectId
        var objectName = element.objectName
        var isStrategic = element.isStrategic
        var assessment = element.assessment
        var dataSource = element.dataSource

        if (isStrategic == "yes") {
            isStrategic = '<span class="object_ok_status">Yes</span>' 
        } else {
            isStrategic =''
        }

        if (assessment == "all") {
            assessment = '<span data-object-id="'+ objectId +'" class="object_custom_source">All</span>'
        } else {
            assessment = ''
        }

        var objectScore1 = "Calculating...";
        var objectScore2 = "Calculating...";
        var objectScore3 = "Calculating...";
        var objectScore4 = "Calculating...";
        var objectScore5 = "Calculating...";
        var progress = "Calculating...";

        k = k + 1
        resultString = resultString + '<tr style="background: #EDEDED;" class="js_table_object_row" data-object-id="'+ objectId +'"><td class="js_goto_object_page_wrapper align_left" style="width : '+ (widthArray[0] + 10) +'px"><span data-object-id="'+ objectId +'" data-source="'+ dataSource +'" class="js_goto_object_page paragraph_textstyle__link">'+ objectName +'</span></td><td class="align_center" data-object-id="'+ objectId +'" style="width : '+ widthArray[1] +'px"> '+ isStrategic +'</td><td style="width : '+ widthArray[2] +'px">'+ assessment +'</td><td data-object-id="'+ objectId +'" class="align_center" style="width : '+ widthArray[3] +'px">'+ objectScore1 + '</td><td data-object-id="'+ objectId +'" class="align_center" style="width : '+ widthArray[4] +'px">'+ objectScore2 + '</td><td data-object-id="'+ objectId +'" class="align_center" style="width : '+ widthArray[5] +'px">'+ objectScore3 + '</td><td data-object-id="'+ objectId +'" class="align_center" style="width : '+ widthArray[6] +'px">'+objectScore4+'</td><td data-object-id="'+ objectId +'" class="align_center" style="width : '+ widthArray[7] +'px">'+ objectScore5 +'</td><td class="align_left" data-object-id="'+ objectId +'" style="width : '+ widthArray[8] +'px">'+ progress +'</td></tr>'

        if (k == dataChildrenArrayofObjects.length) {
            resultString = resultString + '</table>'
            rowItself.child(resultString).show()                                                 
        }
    }
}

As you can see when creating I use the word "Calculating..." to return back to them later and update the cells with AJAX calls. But I absolutely cannot figure out how to do this. And i really need to use a placeholder (instead of calling AJAX when creating) because calculations are really heavy and I want the children rows to be displayed right away so a user can see them before providing the results of calculations.

Would really appreciate your help!