javascript - 从下拉列表中更改不同的表(onChange)

Question

我正在尝试从 onChange 下拉列表中隐藏和显示乘法表。但是我有很多表，并且更改表需要很长时间这是更改表的 js 代码:

$(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();
    }
});

有什么方法可以自定义这部分代码并使其更快且代码更少。我正在使用 DataTables，所以我也需要销毁它，此代码可以工作，但速度很慢。

编辑:

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");
    }
});

这是我的功能之一以及我如何从服务器调用数据所有其他功能都相同，但数据不同。

Answer 1

要回答你的问题，你可以这样做

$("#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()")
}

注意:我个人认为您的设计存在根本问题。您不应该使用这样的多个表，因为这会对性能造成巨大影响。根据要求使用包含不同数据的单个表。