Question

Delete row from table 2 based on row index from table 1

Forms

Updated March 28, 2018

asked on March 23, 2018

Hello

I am having hard time trying to delete row from table 2 based on row index from table 1. This is my code.


  $('.MyTable1').on('click','.cf-table-delete',deleterows);  
  
 function deleterows(){ 

      
       $('.MyTable1 tbody tr').each(function(){
	
     var i3 = $(this).index();
                       
  		 $('.MyTable2 tbody tr:('+(i3).toString()+' .cf-table-delete').click();
   	
 });
 
 }

I am not sure if i am missing anything. Any help from is really appreciated.

0 0

Answer

SELECTED ANSWER

replied on March 27, 2018

Disabled input elements don't fire mouse events, see https://stackoverflow.com/questions/3100319/event-on-a-disabled-input

In your case, you can set the click event on the $('.deletebutton') element directly.

Also note that:

$(e.currentTarget).index() won't get the correct row index, you need to find the ancestor 'tr' element and check its index
index() and nth-child are not corresponding, you need to +1 to the index
$('.MyTable1') would return two elements on certain Forms versions, causing the click event to be fired twice. It's better to use $('table.MyTable1')

Fixed script is like this:

$('table.MyTable1').on("click",'.deletebutton', function(e) {      
    var i3 = $(e.currentTarget).closest('tr').index()+1;
     $('.MyTable2 tbody tr:nth-child('+(i3).toString()+')  .cf-table-delete').click();
     $('.MyTable1 tbody tr:nth-child('+(i3).toString()+') .cf-table-delete').click();
  });

1 0

Replies

replied on March 25, 2018

Hi Tuan,

1. Your script has logic to remove all remaining rows in MyTable2 when delete button on MyTable1 is clicked, because $('.MyTable1 tbody tr').each() would run the function on each row of MyTable1. This does not seem to meet your statement.

2. Another issue is that, after the delete button is clicked, the MyTable1 would be updated; and when your script runs, the original row has been deleted, so you would not get the index of the row before delete. You may try registering the function to on-focus of the delete button but there may be timing issue as well.

3. Even if the logic above is correct, the script would fail because $('.MyTable2 tbody tr:('+(i3).toString()+' .cf-table-delete') is invalid; "tr:(0" has no meaning for JQuery. You should use $('.MyTable2 tbody tr:eq('+(i3).toString()+') .cf-table-delete') instead.

0 0

replied on March 26, 2018

Hi Rui,

Thank you so much for answering. Is there anyway to achieve what I am trying to do? I am having a hard time getting it to work.

0 0

replied on March 26, 2018 • Show version history

This is the closest i have that it's working.

 $('.MyTable1 ').on("click",'tbody tr', function(e) {
      
    var i3 = $(e.currentTarget).index();
     $('.MyTable2 tbody tr:nth-child('+(i3).toString()+')  .cf-table-delete').click();
$('.MyTable1 tbody tr:nth-child('+(i3).toString()+') .cf-table-delete').click();

  });

I added another column in the table which i made a button to look like a delete button. I called it .deletebutton . The idea is that when they click on .deletebutton, it will trigger the delete in MyTable2, then delete that row in MyTable1. However, I am unable to get it to work with .deletebutton yet. It works when set click to table but not specific field input.

0 0

View 1 previous reply

replied on March 26, 2018

These are not custom button. I added another single line column, make it read only with default "delete" to make it look like a delete button. I added class .deletebutton to that column.

 $('.MyTable1 ').on("click",'tbody tr .deletebutton input', function(e) {
      
    var i3 = $(e.currentTarget).index();
     $('.MyTable2 tbody tr:nth-child('+(i3).toString()+')  .cf-table-delete').click();
$('.MyTable1 tbody tr:nth-child('+(i3).toString()+') .cf-table-delete').click();

  });

Here is the code i am working with. I am trying to target the input of each row at .deletebutton but it's not working. Any advises are really appreciated.

0 0

SELECTED ANSWER

replied on March 27, 2018

Disabled input elements don't fire mouse events, see https://stackoverflow.com/questions/3100319/event-on-a-disabled-input

In your case, you can set the click event on the $('.deletebutton') element directly.

Also note that:

$(e.currentTarget).index() won't get the correct row index, you need to find the ancestor 'tr' element and check its index
index() and nth-child are not corresponding, you need to +1 to the index
$('.MyTable1') would return two elements on certain Forms versions, causing the click event to be fired twice. It's better to use $('table.MyTable1')

Fixed script is like this:

$('table.MyTable1').on("click",'.deletebutton', function(e) {      
    var i3 = $(e.currentTarget).closest('tr').index()+1;
     $('.MyTable2 tbody tr:nth-child('+(i3).toString()+')  .cf-table-delete').click();
     $('.MyTable1 tbody tr:nth-child('+(i3).toString()+') .cf-table-delete').click();
  });

1 0

replied on March 28, 2018

Hi Rui,

Thank you so much. It works now.

$('.MyTable1') would return two elements on certain Forms versions, causing the click event to be fired twice. It's better to use $('table.MyTable1')

This actually explains why when I tested the original code, the rows got deleted twice. I know how to deal with it now.

Thank you so much for your help again.

0 0

You are not allowed to follow up in this post.

Question

Question

Delete row from table 2 based on row index from table 1

Answer

Replies

Sign in to reply to this post.