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?