ADD A ROW IN A SPECIFIC AREA OF THE TABLE. | Community
Skip to main content
I
islandgirl23
Level 5
August 27, 2022
Solved

ADD A ROW IN A SPECIFIC AREA OF THE TABLE.

  • August 27, 2022
  • 2 replies
  • 1153 views

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

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Manu_Mathew_

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

2 replies

ksh_ingole7
Community Advisor
ksh_ingole7Community Advisor
Community Advisor
August 27, 2022

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

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

Thanks

 

    I
    islandgirl23Author
    Level 5
    August 27, 2022

    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
      Community Advisor
      ksh_ingole7Community Advisor
      Community Advisor
      August 27, 2022

      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_
        Community Advisor
        Manu_Mathew_Community AdvisorAccepted solution
        Community Advisor
        August 28, 2022

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

          Terms & ConditionsAccessibility statement

          Loading footer...