Autopopulate a row field within two different tables

asked on December 24, 2020

This is a follow-up question to:

https://answers.laserfiche.com/questions/60641/Auto-populate-a-row-field-with-the-row-number#60642

I applied CSS rowNum to both tables and added the following java:

$(document).ready(function(){

//Autopopulates a row field with the row number
  $(document).on('click', '.form-del-field', function () {
    rowNumbering();
  });

  rowNumbering();
    $('#q102,#q105').click(rowNumbering);
    function rowNumbering() {
      currentRow = 1;
    $('.cf-table-block tbody tr').each(function () {
      $(this).find('.rowNum input').val(currentRow);
      currentRow++;
    });
  }

});  //close document.ready

Where #q102 and #q105 are the Add buttons for each table. Here's my result and I've marked up what I want.

Any ideas how to get each table to start at 1?

0 0

SELECTED ANSWER

replied on December 24, 2020 • Show version history

To get the functionality that you want, we need to separate each table out into separate functions. This also means that we need to specify a different CSS Class for the "Row Number" field in the second table (in my example, I'm still using "rowNum" for the field in the first table, and "rowNum2" for the field in the second table).

The CSS designator for each function should be the "Add" button for each table, respectively (for yours, one will be "#q102" and one will be "#q105").

The next issue is that the "cf-table-block" designator is telling the function to look through ALL tables on the Form, which is why both tables are being included as part of the same number chronology. To remedy this, you can replace ".cf-table-block" with the CSS designator for only THAT table (respective for each function):

[image]

(it's usually on number higher than the "Add" button designator, but check to verify)

Alternatively, you can specify a CSS Class for the table as a whole (this is in addition to the "rowNum" designator on the actual field; this CSS Class with be on the whole table). In my below example, I specified the CSS Class "TableOne" for the first table, and "rowNum" for the "Row" field in the first table:

[image]

This tells that function (the one for the "#q102" click) to only look through the "TableOne" CSS Class for the "rowNum" CSS Class inputs, and add 1 to the current number of rows. This will get that function working regardless of anything that happens in the second table.

Next, we do the same for the second table (in my example, I've set the CSS Class "TableTwo" for the second table and the class "rowNum2" for the "Row" field in the second table). I am then creating a separate function (rowNumbering2) and a second "currentRow" variable (currentRow2):

[image]

This separates each table into a separate function, with separate CSS Classes, and isolates the functions and actions to each table (so one table doesn't look at the other, and vice versa).

Below is the final code, as a whole:

[image]

This should get each of your tables functioning properly.

1 0

replied on December 28, 2020 • Show version history

UPDATE: I did have to make "currentRow" unique for each table. I've updated the java below. Here's the final code I used:

$(document).ready(function(){

//Autopopulates row numbers on restrictions table
  $(document).on('click', '.form-del-field', function () {
    rowNumbering1();
  });

  rowNumbering1();
    $('#q102').click(rowNumbering1);
    function rowNumbering1() {
      currentRow1 = 1;
    $('.restrictions tbody tr').each(function () {
      $(this).find('.supplierApprovalRestrictionsNo input').val(currentRow1);
      currentRow1++;
    });
  }

//Autopopulates row numbers on conditions table
  $(document).on('click', '.form-del-field', function () {
    rowNumbering2();
  });

  rowNumbering2();
    $('#q105').click(rowNumbering2);
    function rowNumbering2() {
      currentRow2 = 1;
    $('.conditions tbody tr').each(function () {
      $(this).find('.supplierApprovalConditionsNo input').val(currentRow2);
      currentRow2++;
    });
  }

});  //close document.ready

1 0

Question

Question

Autopopulate a row field within two different tables

Answer

Replies

Sign in to reply to this post.