Merging repeading structure of inline buttons getting info from multiple tables

Capamania

In a specific table 'mytableA' I have two different inline buttons ('select_x' and 'select_y') for each row. To get the row information and run a different event depending on the inline button selected I do this:

    var table_a = $('#mytableA').DataTable({ });
    
    var inTable_editor_table_a_x = $('#mytableA').on('click', 'a.select_x', function (e) {
        e.preventDefault();
        var hostRow = $(this).closest('tr');
        var data = table_a.row( hostRow ).data();   
        
        // Specific event for select_x
                
    } );

    var inTable_editor_table_a_y = $('#mytableA').on('click', 'a.select_y', function (e) {
        e.preventDefault();
        var hostRow = $(this).closest('tr');
        var data = table_a.row( hostRow ).data();
        
        // Specific event for select_y
                    
    } );

But now I have three additional tables where I want to run the same events similar to above. The structure of the 4 tables are exactly the same.

    var table_b = $('#mytableB').DataTable({ });
    var table_c = $('#mytableC').DataTable({ });
    var table_d = $('#mytableD').DataTable({ });

As of right now ... I would write it like this:

    var inTable_editor_table_b_x = $('#mytableB').on('click', 'a.select_x', function (e) {
        e.preventDefault();
        var hostRow = $(this).closest('tr');
        var data = table_b.row( hostRow ).data();   
        
        // Specific event for select_x
                
    } );

    var inTable_editor_table_b_y = $('#mytableB').on('click', 'a.select_y', function (e) {
        e.preventDefault();
        var hostRow = $(this).closest('tr');
        var data = table_b.row( hostRow ).data();
        
        // Specific event for select_y
                    
    } );    
    
    var inTable_editor_table_c_x = $('#mytableC').on('click', 'a.select_x', function (e) {
        e.preventDefault();
        var hostRow = $(this).closest('tr');
        var data = table_c.row( hostRow ).data();   
        
        // Specific event for select_x
                
    } );

    var inTable_editor_table_c_y = $('#mytableC').on('click', 'a.select_y', function (e) {
        e.preventDefault();
        var hostRow = $(this).closest('tr');
        var data = table_c.row( hostRow ).data();
        
        // Specific event for select_y
                    
    } );    
    
    var inTable_editor_table_d_x = $('#mytableD').on('click', 'a.select_x', function (e) {
        e.preventDefault();
        var hostRow = $(this).closest('tr');
        var data = table_d.row( hostRow ).data();   
        
        // Specific event for select_x
                
    } );

    var inTable_editor_table_d_y = $('#mytableD').on('click', 'a.select_y', function (e) {
        e.preventDefault();
        var hostRow = $(this).closest('tr');
        var data = table_d.row( hostRow ).data();
        
        // Specific event for select_y
                    
    } );        

Is there a shorter way to write this? And does it make sense to merge?

allan

Personally, I'd probably create a function that would add the event handlers, and would accept the function for the specific event as its own argument (the table id and any other relevant variables as well).

Allan