Changing different tables from dropdown (onChange)

Question

I am trying to hide and show multiply tables from dropdown onChange. But i have to many tables and it is taking to long to change the table this is the js code that changes the tables :

$(document).ready(function () {
$('#Table1 , #Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').DataTable().destroy();
$('#Table1 , #Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').hide();

$("#dropdown").on('change', function () {
    var tableId = $(":selected", this).val();
    if (tableId == 'table0') {
        $('#Table1 , #Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').DataTable().destroy();
        $('#Table1 , #Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').hide();
    } else if (tableId == 'Table1') {
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').hide();
        $('#Table1').DataTable();
        $('#Table1').show();
        Table1F();
    } else if (tableId == 'Table6') {
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table1 , #Table7 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table1 , #Table7 , #Table8').hide();
        $('#Table6').DataTable();
        $('#Table6').show();
        Table6F();
    } else if (tableId == 'Table7') {
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table1 , #Table6 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table1 , #Table6 , #Table8').hide();
        $('#Table7').DataTable();
        $('#Table7').show();
        Table7F();
    } else if (tableId == 'Table5') {
        $('#Table2 , #Table3 , #Table4 , #Table7 , #Table1 , #Table6 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table4 , #Table7 , #Table1 , #Table6 , #Table8').hide();
        $('#Table5').DataTable();
        $('#Table5').show();
        Table5F();
    } else if (tableId == 'Table4') {
        $('#Table2 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table8').hide();
        $('#Table4').DataTable();
        $('#Table4').show();
        Table4F();
    }
    else if (tableId == 'Table8') {
        $('#Table2 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').DataTable().destroy();
        $('#Table2 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').hide();
        $('#Table8').DataTable();
        $('#Table8').show();
        Table8F();
    }
    else if (tableId == 'Table2') {
        $('#Table8 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').DataTable().destroy();
        $('#Table8 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').hide();
        $('#Table2').DataTable();
        $('#Table2').show();
        Table2F();
    }
    else if (tableId == 'Table3') {
        $('#Table8 , #Table2 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').DataTable().destroy();
        $('#Table8 , #Table2 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').hide();
        $('#Table3').DataTable();
        $('#Table3').show();
        Table3F();
    }
});

Is there any way i can customize this part of code and make it faster and with less code.I'm using DataTables so i need to destroy it too this code is working but it is slow.

Edit :

function Table1F() {
var url = TABLE1_URL + '?AllRows=True&Fields=Data1&Fields=Data2&Fields=Data3&Fields=Data4&Fields=Data5&Fields=Data6&Fields=Data7&Fields=Data8';
$.ajax({
    url: url,
    dataType: 'json',
    type: 'GET',
    contentType: 'application/json',
    success: function (data, textStatus, jQxhr) {
        $("#Table1").DataTable({
            destroy: true,
            aLengthMenu: [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "All"]
            ],
            iDisplayLength: 25,
            dom: '<"html5buttons"B>lTfgitp',
            buttons: [
                { extend: 'excel', title: 'data' }
            ],
            data: data.List,
            processing: true,
            columns: [
                { data: 'Data1' },
                { data: 'Data2' },
                { data: 'Data3' },
                { data: 'Data4' },
                { data: 'Data5' },
                { data: 'Data6' },
                { data: 'Data7' },
                { data: 'Data8' },
            ],
        });
    },
    error: function (jqXhr, textStatus, errorThrown) {
        swal("Error", errorThrown, "error");
    }
});

This is one of my functions and how i call the data from the server All other functions are the same but with different data.

Answer 1

To answer your question, you can do something like this

$("#dropdown").on('change', function () {
    var tableId = $(":selected", this).val();
    var selectedTable = $('#'+ $(":selected", this).val());
    var allTables = $('table');

    allTables.DataTable().destroy()
    allTables.hide()

    selectedTable.DataTable()
    selectedTable.hide()

    eval(tableId+"F()")
}

NOTE: I personally think you have fundamental problems in your design. You should not be using multiple tables like this as it would take a huge hit in performance. Use single table with different data on request.

Answer 2

Set all Tables to hidden using css and then change the css using javascript code

 document.getElementById("#table").style.display = "none"

and put all table id in an array