Question

Create table rows according to variable

Forms

Updated July 26, 2018

asked on October 12, 2017

I have a form where the submitter enters a starting date. An end date is calculated based on the start date. I also calculate the total number of days between the start date and end date. This is stored in a number field for use.

In my table I want to create rows based on the number of days that was calculated. For example, if there were 9 days between the start and end dates, then, 9 rows would be in the table. If 20 days, then 20 rows.

How do I accomplish this?

1 0

Answers

APPROVED ANSWER

replied on October 12, 2017 • Show version history

UPDATE: Looks like Tri beat me to the punch lol

One way to do this would be to:

set the table to allow adding/removing rows
use CSS to hide the add/delete options so the user can access them
attach a change event handler to the field for number of days
- Retrieves the number of days
- clears any existing rows (necessary if the value could be changed more than once)
- adds the necessary number of rows by triggering the add row event

$('.daysField input').change(function(){
      // Delete existing rows
      $('.yourTable .cf-table-delete').each(function(){
        $(this).click();
      });

      // Count number of rows in table
      var n = $(this).val();

      // Add rows to table
      for(var i = 0; i < n; i++){
        $('.yourTable .cf-table-add-row').click();
      };
})

3 0

SELECTED ANSWER

replied on October 12, 2017 • Show version history

Hi Mary, this would be possible with some JavaScript. Here's what I came up with that should get you started:

$(document).ready(function(){
  $('.numberDays input').change(function(){ 
    var rowNumber = $(this).val();
    $('.myTable .form-del-field').trigger('click');
    for (i=0; i<rowNumber; i++){
      $('.myTable .cf-table-add-row').trigger('click');
    }
  })
});

This will grab X amount in your number field (which I've assigned the class of 'numberDays') and:

1. Delete all the rows currently in the table

2. Click the blue add button X number of times.

This means that if someone changes the start and/or end date, effectively changing the number of days, the table will reset with the correct number of rows. Unfortunately this means that if someone changes the amount of days, the table will get cleared.

Hope this helps.

3 0

replied on October 13, 2017

This code adjusted the table perfectly, even when the starting date changed.

I do not need to worry about anyone changing the amount of days directly. It is a hidden field.

Thanks.

0 0

Replies

replied on April 19, 2018

Hi,

I was looking at this post but I wanted to see if you could get this row count, but also for each row in the FOR loop, populate a field based on a SQL query result and Name the Row name based on another Column from the result.

It would look like the following:

0 0

replied on July 26, 2018

I know this is a bit old, but i've used something similar to this script to add rows to a table as well as auto-increment the dates in each row by doing the following:

$('#Field963').change(addrows); 
    function addrows(){
    var $addrow = $('#q511');
      $addrow.show();
    $('.ro input').removeAttr('readonly');
    $('.ro select').removeAttr('readonly');
    $('.meal_table tbody tr:not(:first)').remove();
      var rownumber = ($('#Field963').val()-1);
      for (i=0; i < rownumber; i++){
        var tt = $('#Field647').val();
        var ndate = new Date(tt);
        var newdate = new Date(ndate);
        newdate.setDate(newdate.getDate()+i);
        var mm = ('0'+(newdate.getMonth()+1)).slice(-2);
        var dd = ('0'+(newdate.getDate())).slice(-2);
        var yyyy = newdate.getFullYear();
        var dupdate = mm+"/"+dd+"/"+yyyy;
        $('.meal_table tbody tr:last').find('.mealdate input').val(dupdate);
        $('#q511').trigger('click');
      }
    $('.meal_table tbody tr:last').find('.mealdate input').val($('.datereturn input').val());
      $('.meal_table tbody tr:last').find('.mealdate input').trigger('change');
  $('.ro input').attr('readonly','True');
  $('.ro select').attr('readonly','True');
    $addrow.hide()
    }

My issue is that this is extremely slow because it is needing to click the "AddRow" button during each loop while doing the JS on each iteration to increase the date. When the change occurs that triggers this event, each day added to the range adds a little over a second per row. Any ideas on how I could speed this up?

0 0

You are not allowed to follow up in this post.

Question

Question

Create table rows according to variable

Answers

Replies

Sign in to reply to this post.