Adobe Experience Manager Sites & More

islandgirl23 · 8/27/22

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;
}
}
}

Manu_Mathew_ · 8/28/22

@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

ksh_ingole7 · 8/27/22

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

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

Thanks

islandgirl23 · 8/27/22

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.

ksh_ingole7 · 8/27/22

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.

Manu_Mathew_ · 8/28/22

@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.

Adobe Experience Manager Sites & More

ADD A ROW IN A SPECIFIC AREA OF THE TABLE.

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe