OL Learn

Appending new <tr> record after child inside detail table

Good Morning

I would like to append new

record under current child inside dynamic table from template script.

How I can do this?

This is my script:

results.each(function(index) 
{
				var workOrderInteractions  = this.children()[15].text();
				workOrderInteractions = "test work order";
				if(workOrderInteractions != "") 
				{
					//hideDRecordExtended
					//this.children().removeClass("hideDRecordExtended");
					this.children().append("<tr style='display: block; clear: both; float: left;'><td>TEST "+ workOrderInteractions +"</td></tr>")
					this.css('background-color', 'lightgreen');
				}
			
});

I am able to append to each cell of my row, but dont know hot to add new row

right after current row.

Please help

What is you selector?

.detailDHolder selector from main

detail table.

This is fine, already appended this into same record.

				extendedDetail += "<tr></br>";
					extendedDetail += "<td>";
						extendedDetail += "";
					extendedDetail += "</td>";
					extendedDetail += "<td>";
						extendedDetail += "TEST" + workOrderInteractions +" ";
					extendedDetail += "</td>";
				extendedDetail += "</tr>";
				
				this.children().append(extendedDetail);

I am able to append this test text into current records tds.

But I would like to add new record under.

Any ideas?

Please share the whole content of the DOM so to have a better overview.

This is my section DOM elements where building all tables:

<br>
<table id="tableServiceDetailsID" class="table--grid" data-column-resize="" data-hide-when-empty="" data-detail="" style="width :100%" data-expander="2019">
    <tbody>
        <tr data-repeat="detailS">
            <td colspan="6">
                <span id="serviceRecord" class="serviceHeader">SERVICE ADDRESS#: </span><span id="customer_ZO_ID" class="Customer_ZO"></span>
            </td>
            <td colspan="4"><span id="serviceRecord" class="serviceHeader">PO#: </span><span id="sapo_ID" class="SAPO"></span></td>
        </tr>
        <tr data-repeat="detailS">
            <td colspan="10">
                <span id="serviceRecord" class="serviceHeader">SERVICE ADDRESS: </span><span id="name_ZO_ID" class="Name_ZO"></span>, <span id="street_ZO_ID" class="Street_ZO"></span>, <span id="city_ZO_ID" class="City_ZO"></span>, <span id="region_ZO_ID" class="Region_ZO"></span>
            </td>
        </tr>
        <tr class="tabServiceTableDetHeader" data-repeat="detailS">
            <td style="display: none; width: 6.96%;">Indicator</td>
            <td style="width: 4.95%;">#</td>
            <td style="width: 35.07%;">DESCRIPION</td>
            <td style="width: 19.95%;">SERVICE DATE/PERIOD</td>
            <td style="width: 14.99%;">WO#</td>
            <td style="width: 4.95%;">QTY</td>
            <td style="width: 4.95%;">UNIT</td>
            <td style="width: 4.95%;">RATE</td>
            <td style="width: 6.96%;">AMOUNT</td>
            <td style="width: 2.95%;">*</td>
        </tr>
        <tr class="detailRecord detailDHolder" data-repeat="detailS.detailDetails">
            <!-- D record start -->
            <!-- This hidden rows are used to transport information into script -->
            <td id="indicatorID" class="detailRow hideDRecord" style="display: none;" data-field="Indicator">@Indicator@</td>
            <!-- end transport layer, do not modify/remove -->
            <td id="lineItemID" class="detailRow hideDRecord" data-field="LineItem">@LineItem@</td>
            <td id="serviceDescID" class="detailRow hideDRecord" data-field="ServiceDescription">@ServiceDescription@</td>
            <td id="finalDateID" class="detailRow hideDRecord" data-field="FinalServiceDate">@FinalServiceDate@</td>
            <td id="woID" class="detailRow hideDRecord" data-field="WR1WorkOrderNumber">@WR1WorkOrderNumber@</td>
            <td id="qtyID" class="detailRow hideDRecord" data-field="TargetQty">@TargetQty@</td>
            <td id="unitID" class="detailRow hideDRecord" data-field="Salesunit">@Salesunit@</td>
            <td id="rateID" class="detailRow hideDRecord" data-field="Rate">@Rate@</td>
            <td id="finamNetID" class="detailRow hideDRecord" data-field="FinalNetAmount">@FinalNetAmount@</td>
            <td id="asteriskID" class="detailRow hideDRecord" data-field="AsteriskField">@AsteriskField@</td>
            <!-- DH record start -->
            <td id="containerNumID" class="containerRow hideDHRecord" colspan="10" data-field="ContainerLocation">
                @ContainerLocation@ 
            </td>
            <!-- DP record start -->
            <td id="serviceDescPriceID" class="detailPricingRow hideDPRecord" colspan="4" data-field="ServiceDescription">
                @ServiceDescription@ 
            </td>
            <td id="slsUnDsPriceID" class="detailPricingRow hideDPRecord" colspan="2" data-field="SlsUnDs">@SlsUnDs@ </td>
            <td id="ratePriceID" class="detailPricingRow hideDPRecord" colspan="2" data-field="Rate">@Rate@ </td>
            <td id="FinalNetAmountPriceID" class="detailPricingRow hideDPRecord" colspan="2" data-field="FinalNetAmount">
                @FinalNetAmount@ 
            </td>
            <!-- D record extended start -->
            <td id="workOrderIDExt" class="detailRow hideDRecordExtended" colspan="10" style="display: none;" data-field="WorkOrderInteractions">
                @WorkOrderInteractions@ 
            </td>
        </tr>
        <tr class="separatorRow" data-repeat="detailS">
            <td class="separatorCell" colspan="10"></td>
        </tr>
    </tbody>
</table>
<p>
</p>

Hi @Odyn,

A option is to make use of the after() function. For example if you would like to add a TR-element after each tr.detailDHolder element then you can use something like:

Print Context Section > Source:

<table id="custom-table" cellpadding="0" cellspacing="0" style=" width: 100%;">
    <tbody>
        <tr>
            <td>Hello World! (1) </td>
        </tr>
        <tr>
            <td>Hello World! (1) </td>
        </tr>
        <tr>
            <td>Hello World! (1) </td>
        </tr>
    </tbody>
</table>

Standard Script:
Selector: table#custom-table tbody tr

results.each(function (index) {
	var result = "";
	
	result += "<tr>";
	result += "<td>Hello World! (2)</td>";
	result += "</tr>";

	this.after(result);
});

Here’s your problem, your selector is a <tr> and you try to append to its children

results.each(function(index)
{
var workOrderInteractions = this.children()[15].text();
workOrderInteractions = “test work order”;
if(workOrderInteractions != “”)
{
//hideDRecordExtended
//this.children().removeClass(“hideDRecordExtended”);
this.children().append(“

TEST “+ workOrderInteractions +””)
this.css(‘background-color’, ‘lightgreen’);
}

});

If you want to add another row, you need to do it like this:

results.each(function(index){
   var workOrderInteractions  = this.children()[15].text();
   workOrderInteractions = "test work order";
   if(workOrderInteractions != "") {
         //this.parent is the table and you append a new <tr> to it
	     this.parent().append("<tr style='display: block; clear: both; float: left;'><td>TEST "+ workOrderInteractions +"</td></tr>")
         this.css('background-color', 'lightgreen');
   }
});

Thank You hamej

When I test parrent().append(), this append my new records at the end of my details table, not after current child record.

Same situation with this.after() which appends new record at the end not after each

record.

My child contains my whole

If you would like to add a child element, which is basically a TD-element, to each tr.detailDHolder then you can use this.append() instead of this.parent().append().

then use this.after(<content>); instead of this.parent().append(<content>);

You might want to look at this for further references…

When I use this.append() this append this new

record as additional

When I use this.after(). In my case it add new records totaly outside of my details.

I would like to insert/append new

right after my current detail in table.

When I do this way:

				var extendedDetail = "";
				if(workOrderInteractions != "") 
				{
					extendedDetail += "<tr style='display: block; clear: both; float: left;'></br>";
						extendedDetail += "<td>";
							extendedDetail += "</br> TEST " + workOrderInteractions +" end.";
						extendedDetail += "</td>";
					extendedDetail += "</tr>";
					
					this.children().append(extendedDetail);

I am able to append this inside current record, but the problem is later that I need to make colspan=10 into appended record to write other fields/information and fit them on whole record width.

I’m wondering, are you using this in the same script as the one shown in your first ‘post’? And the Selector of the Standard Script is the TR-element with the CSS class .detailDHolder. Otherwise, please share the entire JavaScript code and the entire HTML code.

But I suppose that it’s in this case probably better to open a technical support ticket on our ‘website’. Because then we can help you with all the issues you’re currently facing with the specific Print, Email or Web Template file.

Yes Marten its still the same script but i am going to extend this on additional logic.

This is current script:

// this script will be executed for each record from recordset
results.each(function(index) 
{
	// get hidden indicator from <TD> column
	var indicator  = this.children()[0].text();
			
			// for record type D we will display records
			if(indicator == "D") 
			{​​
				this.children().removeClass("hideDRecord");
				this.css('background-color', 'lightgreen');
				
				var workOrderInteractions  = this.children()[15].text();
				workOrderInteractions = "test work order";
				
				var extendedDetail = "";
				if(workOrderInteractions != "") 
				{
					extendedDetail += "<tr style='display: block; clear: both; float: left;'>";
						extendedDetail += "<td colspan='10'>";
							extendedDetail += "</br> TEST " + workOrderInteractions +" end.";
						extendedDetail += "</td>";
					extendedDetail += "<tr>";
						
						//this.removeClass("hideDRecordExtended");
					//extendedDetail += "</tr>";
					
					//var currentRecord = this.parent().html();
					//var test = currentRecord + extendedDetail;
					
					this.append(extendedDetail);
				}
				
			}
			// for DH record type (Detail Header)	
			else if(indicator == "DH") 
			{
				// we want to extract container location for DH record
				var containerLocation = this.children()[10].text().trim();
				
				// if container location is empty
				if(containerLocation.length == 0) 
				{
					// we will add the only space
					this.children()[10].html("&nbsp;"); 
				}
				​​
				this.children().removeClass("hideDHRecord");
				this.css('background-color', 'lightblue');
				
			}		
			// for DP record type (Detail Pricing)	
			else if(indicator == "DP") 
			{
				// we want to extract some fields for DH record
				var serviceDescription = this.children()[11].text().trim();
				var slsUnDs = this.children()[12].text().trim();
				var ratePrice = this.children()[13].text().trim();
				var finalNetAmount = this.children()[14].text().trim();
				
				if(serviceDescription.length == 0) 
				{
					// we will add the only space
					this.children()[11].html("&nbsp;"); 
				}
				
				if(slsUnDs.length == 0) 
				{
					// we will add the only space
					this.children()[12].html("&nbsp;"); 
				}
				
				if(ratePrice.length == 0) 
				{
					// we will add the only space
					this.children()[13].html("&nbsp;"); 
				}
				
				if(finalNetAmount.length == 0) 
				{
					// we will add the only space
					this.children()[14].html("&nbsp;"); 
				}
				
				this.children().removeClass("hideDPRecord");
				this.css('background-color', 'lightyellow');
				
			}
			
});

Yes the selector is still “.detailDHolder” because I am executing logic for each detail inside my detail table.

I just need to append new record after this element.

I suppose that you can still use this.after(); if you would like to add a new TR-element after each TR-element of your results.each(function (index) {}); code. Please remove the following CSS, because I suppose that this is the reason why you do have this as result:

// extendedDetail += "<tr style='display: block; clear: both; float: left;'>";
extendedDetail += "<tr>";

In response to:

It would be best that you open a technical support ticket so to have access to the Template and Datamapper and see first hand where the issue is. Could be something that we are all overlooking but kind of hard to figure this out without the complete source code.