Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

ADD A ROW IN A SPECIFIC AREA OF THE TABLE.

Avatar

Level 6

Good day,

 

I have a button at the end of each row which adds a row and keeps the information entered.  The problem is that the row is added under the last row.   I want to add the row under the row that is clicked.  Below is the script on each button.  Can someone help me with the script?

 

var nNewCardIndex = this.parent.parent.parent.instanceManager.count-1;
var sTargetNew = "headersubform.tablesubform.tablesubforms.Table1.Row1[" + nNewCardIndex + "]";
this.resolveNode(sTargetNew).ssfs.rawValue = this.parent.parent.ssfs.rawValue;
this.resolveNode(sTargetNew).dated.rawValue = this.parent.parent.dated.rawValue;

var cInput = xfa.host.response("Enter number of rows you want to add:", "Add rows", "1", false),
n = parseInt(cInput, 10) > 0 ? parseInt(cInput, 10) : 1,
i = 0;
for (i; i < n; i += 1) {
_Row1.addInstance(true);
}

if (!dated.isNull) {
var oRows = Table1.resolveNodes('Row1[*]'),
j = this.parent.index,
cDate = dated.rawValue;
for (j; j < oRows.length; j += 1) {
if (oRows.item(j).dated.isNull) {
oRows.item(j).dated.rawValue = cDate;
}
}
}

if (!ssfs.isNull) {
var oRows = Table1.resolveNodes('Row1[*]'),
j = this.parent.index,
cDate = ssfs.rawValue;
for (j; j < oRows.length; j += 1) {
if (oRows.item(j).ssfs.isNull) {
oRows.item(j).ssfs.rawValue = cDate;
}
}
}

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@islandgirl23 

Below is a code sample:

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 5px solid blue;
}
</style>
</head>
<body>

<p>Click the button to add a new row to the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}
</script>

</body>
</html>

you just need to change the index to insert rows as per position- table.insertRow(index);

You can modify the logic based on your use case.

View solution in original post

4 Replies

Avatar

Community Advisor

To insert a row after the current selected row, you can use the below logic :

newRow.insertAfter($(this).parents().closest('tr'));

Thanks

 

Avatar

Level 6

Thanks.  Where is this entered into my current script? or does this replace a part of my current script?  Right now, my current script works, but the row is added to the bottom of the table.

Avatar

Community Advisor

It's quite difficult to decipher from the code snippet shared. Can you share more details on the same.

 

The basic logic in your code would be,

1. In the Code Find where the New Row is getting inserted. It must be getting inserted at the last index.

2. Find the current position and pass the current position instead of the last index. 

3. Point to be noted, if you are using unique ID for rows kindly handle those as well. 

Avatar

Correct answer by
Community Advisor

@islandgirl23 

Below is a code sample:

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 5px solid blue;
}
</style>
</head>
<body>

<p>Click the button to add a new row to the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}
</script>

</body>
</html>

you just need to change the index to insert rows as per position- table.insertRow(index);

You can modify the logic based on your use case.