Question

我想根据表单中的选择显示不同的表。当从表单和按钮单击进行选择时，我想要生成一个表。每个选择都会产生不同的表格。

现在，在进行选择并单击按钮时会生成表格。但是，有两个问题：

表格将自己排列在另一个之下（我希望点击一个按钮时只能看到一个表格。）
当我使用数据表时，如果我从表单中多次选择某些内容，则会出现以下错误：

无法重新初始化DataTable。有关此错误的详细信息，请参阅http://datatables.net/tn/3

我认为如果我可以在进行新选择时清除上一个表格，这两个问题都可以解决。我有以下代码：

function generateFactsheetFunction(){
    // Selecting the vaccine chosen from the dropdown
    var e = document.getElementById("selectVaccine");
    var selectedVaccine = e.options[e.selectedIndex].text;

    console.log("selectedVaccine: ", selectedVaccine);

    if (selectedVaccine=="Rotavirus Vaccine"){
        jQuery('#tableDiv div').empty();
        console.log("rotavirus selected");
        $(document).ready(function() {
            $('#vaccineRotaFactsheet').DataTable({
                /*Hide the dropdown for number of search results to display, pagination*/
                "bLengthChange": false,
                "bPaginate": false,
                "bAutoWidth": false,

            });
            document.getElementById('tableRotaDiv').style.display="block";

        });
    } else if (selectedVaccine=="Polio Vaccine"){
        jQuery('#tableDiv div').empty();
        console.log("polio selected");
        $(document).ready(function() {
            $('#vaccineOPVFactsheet').DataTable({
                /*Hide the dropdown for number of search results to display, pagination*/
                "bLengthChange": false,
                "bPaginate": false,
                "bAutoWidth": false,

            });
            document.getElementById('tableOPVDiv').style.display="block";

        });

    } else if (selectedVaccine=="Pneumococcal Vaccine"){
        jQuery('#tableDiv div').empty();
        console.log("pneumo selected");
        $(document).ready(function() {
            $('#vaccinePneumoFactsheet').DataTable({
                /*Hide the dropdown for number of search results to display, pagination*/
                "bLengthChange": false,
                "bPaginate": false,
                "bAutoWidth": false,

            });
            document.getElementById('tablePneumoDiv').style.display="block";

        });
    }

}

代码显示没有错误。 jQuery空行阻止了表的生成。这解决了问题2.如何才能显示表格？

更新：删除父div并排除兄弟div解决问题1.这是修改后的代码：

if (selectedVaccine=="Rotavirus Vaccine"){
        jQuery('#tableOPVDiv div').empty();
        jQuery('#tablePneumoDiv div').empty();

但是，即使没有生成错误，我也无法第二次选择实体（问题2）。

Answer 1

使用Gyrocode的建议解决了这个问题：

"Although it makes sense to initialize data tables only once and then show/hide table container on drop-down selection change."

这是代码：

$(document).ready(function() {
            $('#vaccineRotaFactsheet').DataTable({
                /*Hide the dropdown for number of search results to display, pagination*/
                "bLengthChange": false,
                "bPaginate": false,
                "bAutoWidth": false,
                "destroy": true,

            });

        });

    $(document).ready(function() {
            $('#vaccineOPVFactsheet').DataTable({
                /*Hide the dropdown for number of search results to display, pagination*/
                "bLengthChange": false,
                "bPaginate": false,
                "bAutoWidth": false,
                "destroy": true,

            });


        });

    $(document).ready(function() {
            $('#vaccinePneumoFactsheet').DataTable({
                /*Hide the dropdown for number of search results to display, pagination*/
                "bLengthChange": false,
                "bPaginate": false,
                "bAutoWidth": false,
                "destroy": true,    

            });

        });

function generateFactsheetFunction(){
    // Selecting the vaccine chosen from the dropdown
    var e = document.getElementById("selectVaccine");
    var selectedVaccine = e.options[e.selectedIndex].text;

    console.log("selectedVaccine: ", selectedVaccine);


    if (selectedVaccine=="Rotavirus Vaccine"){
        document.getElementById('tableOPVDiv').style.display="none";
        document.getElementById('tablePneumoDiv').style.display="none";
        console.log("rotavirus selected");
        document.getElementById('tableRotaDiv').style.display="block";


    } else if (selectedVaccine=="Polio Vaccine"){
        document.getElementById('tableRotaDiv').style.display="none";
        document.getElementById('tablePneumoDiv').style.display="none";
        console.log("polio selected");
        document.getElementById('tableOPVDiv').style.display="block";


    } else if (selectedVaccine=="Pneumococcal Vaccine"){
        document.getElementById('tableRotaDiv').style.display="none";
        document.getElementById('tableOPVDiv').style.display="none";
        console.log("pneumo selected");
        document.getElementById('tablePneumoDiv').style.display="block";

    }

}

无法使用带表单的数据表清除子div

1 个答案: