I’m creating a dynamic table by scripts. Table looks like this
<table>
<tr id="lastpaymentInfo">
<td colspan="2">This is your Last Payments</td>
</tr>
<tr id="lastpaymentsRowToRepeat">
<td>@lastpaymentDate</td>
<td>@lastpaymentAmt</td>
</tr>
<tr id="currentpaymentInfo">
<td colspan="2">This is your current Payments</td>
</tr>
<tr id="currentpaymentsRowToRepeat">
<td>@currentpaymentDate</td>
<td>@currentpaymentAmt</td>
</tr>
<tr id="futurepaymentInfo">
<td colspan="2">This should be your future Payments</td>
</tr>
<tr id="futurepaymentsRowToRepeat">
<td>@futurepaymentDate</td>
<td>@futurepaymentAmt</td>
</tr>
</table>
I have a script (see below) to dynamically add by cloning the tr and append to table. Sometimes the designer seemed rearranging the rows and it does not follow the same order when it was added. (eg. currentPayments rows sometimes displayed on the top) I have checked the html source and also the data-breakable attribute is no longer in same order
How I can stop the Designer to stop scrambling the rows but follows the same order when it was added?
Thanks
Romeo
script
var myTemplate = results.clone();
myTemplate.attr(“id”,“paymentDetail_0”);
var paymentLength = record.tables.payments.length;
var paymentTable = record.tables.payments;
var allIndex = 0;
var myRow;
var foundOne = false;
myRow = query("#lastpaymentInfo");
if (lastPayment == true) { // see control script global variable
allIndex++;
myRow.attr("data-breakable",allIndex);
myRow = query("#lastpaymentsRowToRepeat");
foundOne = false;
for(rowIndex = 0; rowIndex < paymentLength; rowIndex++) {
myRow.after(query("#lastPaymentsRowsToRepeat",myTemplate).clone());
myRow = query("#lastPaymentRowToRepeat");
}
if (paymentTable[rowIndex].fields["paymentType"].toLowerCase().trim() == "last payment" && foundOne == true ) {
if (foundOne == false) foundOne = true; // flag to add new cloned row for next record
allIndex++;
myRow.find("@lastpaymentDate@").text(paymentTable[rowIndex].fields["periodDate"]));
myRow.find("@lastpaymentAmt@").text(paymentTable[rowIndex].fields["paymentAmt"]));
myRow.attr("data-breakable",allIndex);
//Make sure that the row doesn't have an id to conflict with the one that will be created by the clone
myRow.removeAttr("id");
}
}
} else {
myRow.remove();
myRow = query("#lastPaymentRowToRepeat");
myRow.remove();
}
myRow = query("#currentpaymentInfo");
if (currentPayment == true) { // see control script global variable
allIndex++;
myRow.attr("data-breakable",allIndex);
myRow = query("#currentpaymentsRowToRepeat");
foundOne = false;
for(rowIndex = 0; rowIndex < paymentLength; rowIndex++) {
myRow.after(query("#currentPaymentsRowsToRepeat",myTemplate).clone());
myRow = query("#currentPaymentRowToRepeat");
}
if (paymentTable[rowIndex].fields["paymentType"].toLowerCase().trim() == "current payment" && foundOne == true ) {
if (foundOne == false) foundOne = true; // flag to add new cloned row for next record
allIndex++;
myRow.find("@currenttpaymentDate@").text(paymentTable[rowIndex].fields["periodDate"]));
myRow.find("@currentpaymentAmt@").text(paymentTable[rowIndex].fields["paymentAmt"]));
myRow.attr("data-breakable",allIndex);
//Make sure that the row doesn't have an id to conflict with the one that will be created by the clone
myRow.removeAttr("id");
}
}
} else {
myRow.remove();
myRow = query("#currentPaymentRowToRepeat");
myRow.remove();
}
myRow = query("#futurepaymentInfo");
if (futurePayment == true) { // see control script global variable
allIndex++;
myRow.attr("data-breakable",allIndex);
myRow = query("#futurepaymentsRowToRepeat");
foundOne = false;
for(rowIndex = 0; rowIndex < paymentLength; rowIndex++) {
myRow.after(query("#futurePaymentsRowsToRepeat",myTemplate).clone());
myRow = query("#futurePaymentRowToRepeat");
}
if (paymentTable[rowIndex].fields["paymentType"].toLowerCase().trim() == "future payment" && foundOne == true ) {
if (foundOne == false) foundOne = true; // flag to add new cloned row for next record
allIndex++;
myRow.find("@currenttpaymentDate@").text(paymentTable[rowIndex].fields["periodDate"]));
myRow.find("@currentpaymentAmt@").text(paymentTable[rowIndex].fields["paymentAmt"]));
myRow.attr("data-breakable",allIndex);
//Make sure that the row doesn't have an id to conflict with the one that will be created by the clone
myRow.removeAttr("id");
}
}
} else {
myRow.remove();
myRow = query("#futurePaymentRowToRepeat");
myRow.remove();
}