多个制表符无法在同一 html 页面上打开的制表符 IE 11 兼容性问题

Question

我们在 IE11 上面临制表符问题，在我们的应用程序中，我们有仪表板，我们试图在点击每张卡片时显示多个制表符 tables。

添加 polyfill 脚本后，我们只能查看一个 table，但我们无法查看其他 tables 我们无法在同一个上看到多个制表符html IE11 中的页面同样在 chrome/Mozilla 中工作正常。我们尝试重新排列脚本，但仍然是同样的问题，控制台或日志上没有错误。

我们附上了包含所有代码的仪表板 html 页面。

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title th:text="#{label.Title}"></title>

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrapupdate.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/font.css}"/>
    <link rel="stylesheet" th:href="@{/css/select2.min.css}"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script type="text/javascript" th:src="@{/js/jquery3.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap4.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery1.12.4.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/select2.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/tabulator.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/moment.js}"></script> 

    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/css/tabulator.css}"/>

    <script> var jqv3 = jQuery.noConflict(); </script>
</head>

<body id="page-top" >
    <!-- Page Wrapper -->
    <div id="wrapper">
                <!-- Begin Page Content -->
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-12 col-md-12 mb-4" style="margin-bottom: 2px !important;">
                            <h1 class="h3 text-gray-800 headerText" style="float:left; font-size: 19px;"><label class="inline mb" th:text="#{label.Buyer}"></label> <label class="inline mb" th:text="#{label.Dashboard}"></label></h1>
                        </div>
                    </div>
                    <div id="accordion">
                        <div class="card">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
                                        <div class="card border-left-primary shadow h-100 py-2 zoom box active" style="cursor: pointer;" id="onloadId">
                                            <div class="card-body card-link" data-toggle="collapse" href="#collapseDraft" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-md-12 mr-2">
                                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Draft</div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.draftCount}"></div>
                                                        <img th:src="@{/img/draft.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
                                                    </div>
                                                    <div class="col-sm-12 text-right"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
                                        <div class="card border-left-success shadow h-100 py-2 zoom box" style="cursor: pointer;">
                                            <div class="card-body card-link" data-toggle="collapse" href="#collapsePublish" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-md-12 mr-2">
                                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Published</div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.publishedCount}"></div>
                                                       <img th:src="@{/img/publish.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
                                                    </div>
                                                    <div class="col-sm-12 text-right"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
                                        <div class="card border-left-query shadow h-100 py-2 zoom box" style="cursor: pointer;">
                                            <div class="card-body card-link" data-toggle="collapse" href="#collapseInquery" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-md-12 mr-2">
                                                        <div class="text-xs font-weight-bold text-query text-uppercase mb-1">In Query Stage</div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.inQueryCount}"></div>
                                                        <img th:src="@{/img/query.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
                                                    </div>
                                                    <div class="col-sm-12 text-right"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
                                        <div class="card border-left-response shadow h-100 py-2 zoom box" style="cursor: pointer;">
                                            <div class="card-body card-link" data-toggle="collapse" href="#collapseInresponse" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-md-12 mr-2">
                                                        <div class="text-xs font-weight-bold text-response text-uppercase mb-1">In Response Stage</div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.inResponseCount}"></div>
                                                        <img th:src="@{/img/inresponse.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
                                                    </div>
                                                    <div class="col-sm-12 text-right"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
                                        <div class="card border-left-warning shadow h-100 py-2 zoom box" style="cursor: pointer;">
                                            <div class="card-body card-link" data-toggle="collapse" href="#collapseShortlist" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-md-12 mr-2">
                                                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Shortlisted</div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.shortlistedCount}"></div>
                                                        <img th:src="@{/img/shortlist.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
                                                    </div>
                                                    <div class="col-sm-12 text-right"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
                                        <div class="card border-left-danger shadow h-100 py-2 zoom box" style="cursor: pointer;">
                                            <div class="card-body card-link" data-toggle="collapse" href="#collapseSelect" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-md-12 mr-2">
                                                        <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Selected</div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.selectedCount}"></div>
                                                        <img th:src="@{/img/selected.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
                                                    </div>
                                                    <div class="col-sm-12 text-right"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
                                        <div class="card border-left-info shadow h-100 py-2 zoom box" style="cursor: pointer;">
                                            <div class="card-body card-link" data-toggle="collapse" href="#collapseClosed" style="padding: 0.4rem 0.4rem 0.6rem 0.4rem;">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-md-12 mr-2">
                                                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Closed</div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${loginForm.closedCount}"></div>
                                                        <img th:src="@{/img/closed.png}" style="float:right; margin-top: -22px; margin-bottom:5px; width: 50px;"></img>
                                                    </div>
                                                    <div class="col-sm-12 text-right"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="collapseDraft" class="collapse show" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="content" id="draftTable"></div>
                                </div>
                            </div>
                            <div id="collapsePublish" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="content" id="publishTable"></div>
                                </div>
                            </div>
                            <div id="collapseInquery" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="content" id="inQueryTable"></div>
                                </div>
                            </div>
                            <div id="collapseInresponse" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="content" id="inResponseTable"></div>
                                </div>
                            </div>
                            <div id="collapseShortlist" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <div id="shortlistTable"></div>
                                </div>
                            </div>
                            <div id="collapseSelect" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <div id="selectedTable"></div>
                                </div>
                            </div>
                            <div id="collapseClosed" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <div id="closedTable"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /.container-fluid -->
            </div>
            <!-- End of Main Content -->
        </div>
        <!-- End of Content Wrapper -->
    </div>
    <!-- End of Page Wrapper -->
    <script type="text/javascript" th:src="@{/js/vendor-portal.min.js}"></script>
    <script th:inline="javascript">

        //draftTable Start Dashboard

            var tabledata = [];
            var draftRfxObj = [[${draftRfx}]];
            if(draftRfxObj == "{}"){
                draftRfxObj = tabledata;
            }else{
                draftRfxObj = JSON.parse(draftRfxObj);
            }

            var publishedRfxObj = [[${publishedRfx}]];
            if(publishedRfxObj == "{}"){
                publishedRfxObj = tabledata;
            }else{
                publishedRfxObj = JSON.parse(publishedRfxObj);
            }

            var inQueryRfxObj = [[${inQueryRfx}]];
            if(inQueryRfxObj == "{}"){
                inQueryRfxObj = tabledata;
            }else{
                inQueryRfxObj = JSON.parse(inQueryRfxObj);
            }

            var inResponseRfxObj = [[${inResponseRfx}]];
            if(inResponseRfxObj == "{}"){
                inResponseRfxObj = tabledata;
            }else{
                inResponseRfxObj = JSON.parse(inResponseRfxObj);
            }

            var shortlistedRfxObj = [[${shortlistedRfx}]];
            if(shortlistedRfxObj == "{}"){
                shortlistedRfxObj = tabledata;
            }else{
                shortlistedRfxObj = JSON.parse(shortlistedRfxObj);
            }

            var selectedRfxObj = [[${selectedRfx}]];
            if(selectedRfxObj == "{}"){
                selectedRfxObj = tabledata;
            }else{
                selectedRfxObj = JSON.parse(selectedRfxObj);
            }

            var closedRfxObj = [[${closedRfx}]];
            if(closedRfxObj == "{}"){
                closedRfxObj = tabledata;
            }else{
                closedRfxObj = JSON.parse(closedRfxObj);
            }

            var allRfxForBuyerObj = [[${allRfxForBuyer}]];
            if(allRfxForBuyerObj == "{}"){
                allRfxForBuyerObj = tabledata;
            }else{
                allRfxForBuyerObj = JSON.parse(allRfxForBuyerObj);
            }

            var table = new Tabulator("#draftTable", {
                height:310,
                data:draftRfxObj,
                layout:"fitColumns",
                pagination:"local",
                responsiveLayout:"show",
                placeholder:"Currently No Records Available.",
                paginationSize:8,
                columns:[
                    {title:"Title", field:"title", formatter:"textarea", widthGrow:2},
                    {title:"Rfx Id", field:"rfxHeaderId",visible:false},
                    {title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
                            url : function(cell){
                                var row = cell.getRow();
                             return "/erfx/findbyId/" + row.getData().rfxHeaderId},
                             target:"_self",
                             urlField:"status"
                        }},
                    {title:"Planned Publish Date", field:"plannedPublishedDate", widthGrow:2},
                    {title:"Created By", field:"createdBy", widthGrow:2},
                    {title:"Raised By", field:"raisedBy", widthGrow:2},
                ],

                initialSort:[
                    {column:"plannedPublishedDate", dir:"asc"},
                ],
            });

        //draft Table End Dashboard

        //Publish Table Start Dashboard

            var table = new Tabulator("#publishTable", {
                height:310,
                data:publishedRfxObj,
                layout:"fitColumns",
                pagination:"local",
                responsiveLayout:"show",
                placeholder:"Currently No Records Available.",
                paginationSize:8,
                columns:[
                    {title:"Title", field:"title", widthGrow:2},
                    {title:"Rfx Id", field:"rfxHeaderId",visible:false},
                    {title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
                            url : function(cell){
                                var row = cell.getRow();
                             return "/erfx/findbyId/" + row.getData().rfxHeaderId},
                             target:"_self",
                             urlField:"status"
                        }},
                    {title:"Planned Publish Date", field:"plannedPublishedDate", widthGrow:2},
                    {title:"Actual Publish Date", field:"actualPublishedDate", widthGrow:2},
                    {title:"Created By", field:"createdBy", widthGrow:2},
                    {title:"Raised By", field:"raisedBy", widthGrow:2},
                    {title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:1},
                ],

                initialSort:[
                    {column:"actualPublishedDate", dir:"asc"},
                ],
            });

        //Publish Table End Dashboard

        //In Query Table Start Dashboard

            var table = new Tabulator("#inQueryTable", {
                height:310,
                data:inQueryRfxObj,
                layout:"fitColumns",
                pagination:"local",
                responsiveLayout:"show",
                placeholder:"Currently No Records Available.",
                paginationSize:8,
                columns:[
                    {title:"Title", field:"title", widthGrow:2},
                    {title:"Rfx Id", field:"rfxHeaderId",visible:false},
                    {title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
                            url : function(cell){
                                var row = cell.getRow();
                             return "/erfx/findbyId/" + row.getData().rfxHeaderId},
                             target:"_self",
                             urlField:"status"
                        }},
                    {title:"Created By", field:"createdBy", widthGrow:2},
                    {title:"Raised By", field:"raisedBy", widthGrow:2},
                    {title:"Query Start Date", field:"queryResolutionStartDate", widthGrow:2},
                    {title:"Query End Date", field:"queryResolutionEndDate", widthGrow:2},
                    {title:"Query Raised", field:"queryRaised", widthGrow:2},
                    {title:"Query Resolved", field:"queryResolved", widthGrow:2},
                ],

                initialSort:[
                    {column:"queryResolutionStartDate", dir:"asc"},
                ],
            });

        //In Query Table End Dashboard

        //inResponseTable Start Dashboard

            var tabledata = [];

            var table = new Tabulator("#inResponseTable", {
                height:310,
                data:inResponseRfxObj,
                layout:"fitColumns",
                pagination:"local",
                responsiveLayout:"hide",
                placeholder:"Currently No Records Available.",
                paginationSize:8,
                columns:[
                    {title:"Title", field:"title", widthGrow:2},
                    {title:"Rfx Id", field:"rfxHeaderId",visible:false,},
                    {title:"Voucher Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
                            url : function(cell){
                                var row = cell.getRow();
                             return "/erfx/findbyId/" + row.getData().rfxHeaderId},
                             target:"_self",
                             urlField:"status"
                        }},
                    {title:"Created By", field:"createdBy", widthGrow:2},
                    {title:"Raised By", field:"raisedBy", widthGrow:2},
                    {title:"Response Start Date", field:"inResponseStartDate", widthGrow:2},
                    {title:"Response End Date", field:"inResponseEndDate", widthGrow:2},
                    {title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
                    {title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
                ],
                initialSort:[
                    {column:"inResponseStartDate", dir:"asc"},
                ],
            });

        //inResponseTable Table End Dashboard */

        //shortlist Table Start Dashboard

            var tabledata = [];

            var table = new Tabulator("#shortlistTable", {
                height:310,
                data:shortlistedRfxObj,
                layout:"fitColumns",
                pagination:"local",
                responsiveLayout:"hide",
                placeholder:"Currently No Records Available.",
                paginationSize:8,
                columns:[
                    {title:"Title", field:"title", widthGrow:2},
                    {title:"Rfx Id", field:"rfxHeaderId",visible:false,},
                    {title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
                            url : function(cell){
                                var row = cell.getRow();
                             return "/erfx/findbyId/" + row.getData().rfxHeaderId},
                             target:"_self",
                             urlField:"status"
                        }},
                    {title:"Created By", field:"createdBy", widthGrow:2},
                    {title:"Raised By", field:"raisedBy", widthGrow:2},
                    {title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
                    {title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
                    {title:"No of Suppliers Shortlisted", field:"suppliersShortlistedCount", widthGrow:2},
                    {title:"Date of Shortlisting", field:"shortlistingDate", widthGrow:2},
                ],
                initialSort:[
                    {column:"shortlistingDate", dir:"asc"},
                ],

            });

        //shortlist Table End Dashboard

        //selected Table Start Dashboard

            var tabledata = [];

            var table = new Tabulator("#selectedTable", {
                height:310,
                data:selectedRfxObj,
                layout:"fitColumns",
                pagination:"local",
                responsiveLayout:"hide",
                placeholder:"Currently No Records Available.",
                paginationSize:8,
                columns:[
                    {title:"Title", field:"title", widthGrow:2},
                    {title:"Rfx Id", field:"rfxHeaderId",visible:false,},
                    {title:"RFX Number", field:"voucherNo", widthGrow:2, formatter:"link", formatterParams:{
                            url : function(cell){
                                var row = cell.getRow();
                             return "/erfx/findbyId/" + row.getData().rfxHeaderId},
                             target:"_self",
                             urlField:"status"
                        }},
                    {title:"Created By", field:"createdBy", widthGrow:2},
                    {title:"Raised By", field:"raisedBy", widthGrow:2},
                    {title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
                    {title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
                    {title:"No of Suppliers Shortlisted", field:"suppliersShortlistedCount", widthGrow:2},
                    {title:"Date of Shortlisting", field:"shortlistingDate", widthGrow:2},
                    {title:"Date of Selection", field:"selectionDate", widthGrow:2},
                ],
                initialSort:[
                    {column:"selectionDate", dir:"asc"},
                ],
            });

        //selected Table End Dashboard

        //Closed Table Start Dashboard

            var tabledata = [];

            var table = new Tabulator("#closedTable", {
                height:310,
                data:closedRfxObj,
                layout:"fitColumns",
                pagination:"local",
                placeholder:"Currently No Records Available.",
                paginationSize:8,
                responsiveLayout:"hide",
                columns:[
                    {title:"Title", field:"title", widthGrow:1},
                    {title:"Rfx Id", field:"rfxHeaderId",visible:false,},
                    {title:"RFX Number", field:"voucherNo", widthGrow:1, formatter:"link", formatterParams:{
                            url : function(cell){
                                var row = cell.getRow();
                             return "/erfx/findbyId/" + row.getData().rfxHeaderId},
                             target:"_self",
                             urlField:"status"
                        }},
                    {title:"Created By", field:"createdBy", widthGrow:2},
                    {title:"Raised By", field:"raisedBy", widthGrow:2},
                    {title:"No of Suppliers Invited", field:"suppliersInvitedCount", widthGrow:2},
                    {title:"No of Suppliers Responded", field:"suppliersRespondedCount", widthGrow:2},
                    {title:"No of Suppliers Shortlisted", field:"suppliersShortlistedCount", widthGrow:2},
                    {title:"Date of Shortlisting", field:"shortlistingDate", widthGrow:2},
                    {title:"Date of Selection", field:"selectionDate", widthGrow:2},
                    {title:"Closure Date", field:"closureDate", widthGrow:1},
                ],
                initialSort:[
                    {column:"closureDate", dir:"asc"},
                ],
            });

        //Closed Table End Dashboard

    </script>
    <script th:inline="javascript">
        $(document).ready(function(){
            $('.box').click(function(){
                if($('.active').length){
                $('.active').not($(this)).removeClass('active').addClass('box');
            }      
                $(this).removeClass('box').addClass('active');     
            });    
        });
    </script>
    </body>
</html>

Answer 1

我可以确定您的代码有两个问题。

首先是您在同一个 table 变量 上创建所有 table（即第二个 table 正在替换第一个 table 在同一个变量上），虽然这不会停止 table 的工作，但这是一种不好的做法，而且这意味着在创建它们之后无法调用它们的任何函数，这让我谈谈我的第二点。

table 未显示的原因可能是 table 在创建时被隐藏。由于 DOM 的工作方式，table 在创建时必须可见，以便 Tabulator 计算 table 的布局方式。

大多数现代浏览器都允许访问 ES8 功能，即 resizeObserver 当其包含元素改变可见性或调整大小时，它会告诉 Tabulator , 这允许它在需要时重新绘制自己。不幸的是，IE 等较旧的浏览器没有此功能，这意味着 Tabulator 不知道它何时可见。

这意味着你需要在 table 可见时调用 redraw 函数:

table.redraw();

这就是为什么您需要声明所有 table 来分隔变量，以便您可以根据需要对每个变量调用重绘函数。

如果出于某种原因将它们全部存储在单独的变量中是一个问题，那么如果您使用的是 Tabulator 4.5 或更高版本，您可以使用以下代码通过 CSS 选择器查找 tables：

var table = Tabulator.prototype.findTable("#example-table")

多个制表符无法在同一 html 页面上打开的制表符 IE 11 兼容性问题

Tabulator IE 11 compatibility issue for more than one tabulator not opening on same html page

html

internet-explorer-11

tabulator