Table Row Index on Delete

asked on June 29, 2023 • Show version history

Hello,

I have a radio button in a table. When you click 'Yes' on that radio button, it adds the next row and chooses a value from a dropdown list and hides/shows fields in that row. This part works well.

When I delete a row from the table, I need to change the previous row's radio button to 'No'. I've tried several ways to get the deleted row's index without any luck.

Here is just a few things I've tried, I always get -1 or 0 in my alerts, no matter how many times I click delete or which row it's on.

$('.Complimentary_Ticket_Table table').on('click','.cf-table-delete',function(e)
{

   var simpleOne = $('.cf-table-delete').index(this);
   alert(simpleOne);
alert('after simpleOne');

    var i3 = $(e.currentTarget).closest('tr').index()+1;
       alert(i3);
alert('after i3');

   var delIdx = $(this).closest('tr').find('.action .cf-table-delete').index(this);
   alert(delIdx);

alert('after delIdx');
});

----------

0 0

SELECTED ANSWER

replied on June 29, 2023

I would hide the system build delete buttons, and add my own. Then make the custom ones I added trigger the change on the prior row before triggering the deletion.

This is tested in Version 11.0.2212.30987 on the Classic Designer. The table has a CSS Class of "myTable", the radio button field in the table has a CSS Class of "myRadio", and that radio button field has values enabled with the values set to Yes and No.

Here's the CSS I used:

.hiddenDelete {display: none!important;}

Here's the Javascript I used:

$(document).ready(function() {
  
  //Run the function when form loads, or table is changed.
  AddSpecialDeleteButtons();
  $('.myTable').change(AddSpecialDeleteButtons);
  $('.myTable .cf-table-add-row').click(AddSpecialDeleteButtons);
  
  //Function to replace standard table delete buttons with
  //custom delete buttons.
  //Then an event listener on those custom delete buttons
  //to wait for them to be clicked.
  //When they are clicked, they will check the myRadio field
  //on the prior row, and if it is set to Yes, it will be
  //changed to No, prior to triggering the row deletion.
  function AddSpecialDeleteButtons() {
    $('.myTable').find('.action .cf-table-delete').each(function() {
      if($(this).is(":visible") && !$(this).hasClass('hiddenDelete')) {
        $(this).addClass('hiddenDelete');
        $(this).after('<div class="myCustomDelete" style="font-size:1.5em; cursor: pointer; text-align: right;">x</div>');
        $('.myCustomDelete').click(function() {
          if($(this).closest('tr').prevAll('tr:first').find('.myRadio input:checked').val() == "Yes") {
            $(this).closest('tr').prevAll('tr:first').find('.myRadio input[value="No"]').prop('checked', true).trigger('change');
          }
          $(this).closest('tr').find('.cf-table-delete').click();
        });
      }
    });
  }
  
});

Here's the table before deleting a row:

And here's the table after deleting that row (I deleted Row 2, and row 1 was changed from Yes to No):

Be aware that this will allow every row to be deleted, even below the minimum number of rows count. I didn't put effort into hiding the custom buttons when it is at or below the minimum number of rows.

0 0

replied on June 30, 2023

Thank You so much, I'll certainly give it a try and let you know how it turns out.

1 0

replied on July 12, 2023

Matthew, This works great! Thank you so much!!!

1 0

replied on July 12, 2023

Happy to hear it worked for you.

0 0

Question

Question

Answer

Replies

Sign in to reply to this post.