论坛 › 知识问答 › javascript - 基于宽度计算的表格列显示和隐藏在 Safari IOS 设备中不起作用

菜鸟教程小白 发表于 2022-12-13 15:15:18

javascript - 基于宽度计算的表格列显示和隐藏在 Safari IOS 设备中不起作用

                                            <p><p>我正在尝试找出此脚本在某些设备上失败的原因。它在 Firefox、Chrome 甚至 IE 浏览器中都能正常工作，但在 Safari IOS 中却不行。</p>

<p>我在这里使用 iPad 通过 JS Fiddle 测试结果:
<a href="https://jsfiddle.net/bm6k3ddg/4/" rel="noreferrer noopener nofollow"><strong>Example »</strong></a> </p>

<p>HTML 取自 UAT 网站，因此有点粗，但我已将其略微缩小。以及从最初的 1000 行中删除的脚本。</p>

<p><strong>用于列计算的 JavaScript:</strong></p>

<pre><code> $.fn.manageColumns = function () {
    function isVisible () {
      return $(this).css(&#34;display&#34;) !== &#34;none&#34;;
    }
    try {
      var $that = $(this);
      var $parent = $that.closest(&#34;form&#34;);
      var data = $parent.data(&#34;state&#34;);
      if (! $.isPlainObject(data)) { data = $parent.attr(&#34;data-state&#34;); }
      if (! $.isPlainObject(data)) { throw new TypeError(&#34;data-state not an object&#34;); }
      console.log(typeof data);
      if ($.isPlainObject(data)) {
            var groups = data.groups;
            var groupString = &#34;&#34;;
            $.each(groups, function (key, value) {
                groupString += &#34;,&#34;;
            });
            if (groupString.length) {
                groupString = groupString.slice(0, -1);
            }
            console.log(groupString);
            var $visible = $that.find(groupString).not(&#34;.column-vis&#34;);
            var $hidden = $that.find(&#34;&#34;).not(&#34;.column-vis&#34;).not($visible);
            var $all = $that.find(&#34;&#34;).not(&#34;.column-vis&#34;);
            $all.hide();
            $visible.show();
            if ($parent.width() &lt; $that.width()) {
                console.log(&#34;Will hide columns to fit screen size&#34;);
                var maxIterations = 100;
                var minGroups = 1;
                var group = Number.MAX_VALUE;
                for ( ; ($parent.width() &lt; $that.width()) &amp;&amp; (maxIterations &gt; 0) &amp;&amp;
                        (group &gt; minGroups); --maxIterations) {
                  var $nextElem = $that.find(&#34;col&#34;).filter(isVisible).last();
                  group = parseInt($nextElem.data(&#34;column-group&#34;));
                  $that.find(&#34;&#34;).not(&#34;.column-vis&#34;).hide();
                }
                var span = 0;
                $that.find(&#34;col&#34;).each(function () {
                  var $vCol = $(this);
                  if ($vCol.isVisible()) {
                        var columnSpan = parseInt($vCol.attr(&#34;span&#34;));
                        if (columnSpan &lt;= 0) {
                            columnSpan = 1;
                        }
                        span += parseInt(columnSpan);
                  }
                });
                $all.attr(&#34;colspan&#34;, span).show();
            }
            else {
                console.log(&#34;Don&#39;t need to hide columns&#34;);
                $all.show();
                $hidden.hide();
                $visible.show();
            }
      }
    }
    catch (e) {
      console.log(e.message);
    }
};
</code></pre>

<p>HTML:</p>

<pre><code>&lt;body&gt;&lt;div class=&#34;test-widget test-table-container&#34;&gt;&lt;div class=&#34;test-widget-bg&#34;&gt;&lt;/div&gt;&lt;span class=&#34;test-icon icon-setup test-icon-corner&#34;&gt;&lt;/span&gt;&lt;p class=&#34;test-widget-title&#34;&gt;Schedule&lt;/p&gt;&lt;p class=&#34;test-widget-info&#34;&gt;&lt;/p&gt;&lt;div&gt;&lt;div&gt;&lt;div class=&#34;test-table-gutter&#34;&gt;&lt;div class=&#34;test-table&#34;&gt;&lt;form action=&#34;javascript:;&#34; autocomplete=&#34;off&#34; data-feature-id=&#34;54188&#34; data-source-id=&#34;a586120c-e3df-44a4-ab21-ef59c9a9f111&#34; data-target-id=&#34;56836&#34; data-widget-id=&#34;748&#34; enctype=&#34;multipart/form-data&#34; method=&#34;post&#34;&gt;&lt;table class=&#34;test-data-table table table-bordered table-hover table-column-control table-active&#34;&gt;&lt;colgroup&gt;&lt;col class=&#34;row-status-color&#34; span=&#34;1&#34; /&gt;&lt;col class=&#34;select-all-rows&#34; span=&#34;1&#34; /&gt;&lt;col data-column-group=&#34;1&#34; span=&#34;1&#34; /&gt;&lt;col data-column-group=&#34;2&#34; span=&#34;1&#34; /&gt;&lt;col data-column-group=&#34;3&#34; span=&#34;1&#34; /&gt;&lt;col data-column-group=&#34;4&#34; span=&#34;1&#34; /&gt;&lt;col data-column-group=&#34;5&#34; span=&#34;6&#34; /&gt;&lt;col data-column-group=&#34;6&#34; span=&#34;5&#34; /&gt;&lt;col data-column-group=&#34;7&#34; span=&#34;3&#34; /&gt;&lt;col data-column-group=&#34;8&#34; span=&#34;7&#34; /&gt;&lt;col data-column-group=&#34;9&#34; span=&#34;5&#34; /&gt;&lt;/colgroup&gt;&lt;thead&gt;&lt;tr&gt;&lt;th colspan=&#34;32&#34; data-column-all=&#34;all&#34;&gt;&lt;div class=&#34;col-xs-12 col-sm-9&#34;&gt;&lt;div class=&#34;test-table-filters test-table-match&#34;&gt;&lt;div&gt;&lt;div class=&#34;test-table-filter&#34; data-filter-id=&#34;55f025e2-c68e-4210-a174-e34395a3e5dc&#34;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;col-xs-12 col-sm-3&#34;&gt;&lt;div class=&#34;test-table-control test-table-match&#34;&gt;&lt;div class=&#34;test-auto-key test-control-select&#34;&gt;&lt;/div&gt;&lt;div class=&#34;multiselect test-control-select&#34;&gt;&lt;div class=&#34;select-box&#34;&gt;&lt;ul class=&#34;form-control&#34;&gt;&lt;li&gt;Columns&lt;/li&gt;&lt;/ul&gt;&lt;div class=&#34;checkboxes-over-select&#34;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;checkboxes&#34;&gt;&lt;label for=&#34;2fba68e2-7d23-46bb-b340-075ef549b51f&#34;&gt;&lt;input checked=&#34;checked&#34; class=&#34;column-vis&#34; data-column-group=&#34;1&#34; id=&#34;2fba68e2-7d23-46bb-b340-075ef549b51f&#34; type=&#34;checkbox&#34; /&gt;Name&lt;/label&gt;&lt;label for=&#34;85f5631d-4fa2-4708-9001-075d67104ec6&#34;&gt;&lt;input checked=&#34;checked&#34; class=&#34;column-vis&#34; data-column-group=&#34;2&#34; id=&#34;85f5631d-4fa2-4708-9001-075d67104ec6&#34; type=&#34;checkbox&#34; /&gt;Zone&lt;/label&gt;&lt;label for=&#34;0a1e4226-4402-47ec-ae98-426ee767a4ed&#34;&gt;&lt;input checked=&#34;checked&#34; class=&#34;column-vis&#34; data-column-group=&#34;3&#34; id=&#34;0a1e4226-4402-47ec-ae98-426ee767a4ed&#34; type=&#34;checkbox&#34; /&gt;Status&lt;/label&gt;&lt;label for=&#34;47ebdbde-3f49-4d40-a855-d27b82865c50&#34;&gt;&lt;input checked=&#34;checked&#34; class=&#34;column-vis&#34; data-column-group=&#34;4&#34; id=&#34;47ebdbde-3f49-4d40-a855-d27b82865c50&#34; type=&#34;checkbox&#34; /&gt;Roamable&lt;/label&gt;&lt;label for=&#34;f70ceb61-1b6f-41cd-b251-5735dc7bd6b6&#34;&gt;&lt;input checked=&#34;checked&#34; class=&#34;column-vis&#34; data-column-group=&#34;5&#34; id=&#34;f70ceb61-1b6f-41cd-b251-5735dc7bd6b6&#34; type=&#34;checkbox&#34; /&gt;Schedule&lt;/label&gt;&lt;label for=&#34;2ef942c6-af71-4c00-ac95-0d87d443b8fd&#34;&gt;&lt;input checked=&#34;checked&#34; class=&#34;column-vis&#34; data-column-group=&#34;6&#34; id=&#34;2ef942c6-af71-4c00-ac95-0d87d443b8fd&#34; type=&#34;checkbox&#34; /&gt;Authentication&lt;/label&gt;&lt;label for=&#34;8ff2a2c5-5c1f-4ff7-bb99-95adfa20fe04&#34;&gt;&lt;input checked=&#34;checked&#34; class=&#34;column-vis&#34; data-column-group=&#34;7&#34; id=&#34;8ff2a2c5-5c1f-4ff7-bb99-95adfa20fe04&#34; type=&#34;checkbox&#34; /&gt;Device&lt;/label&gt;&lt;label for=&#34;babda357-ae2e-41fe-8434-4bf43a969c6d&#34;&gt;&lt;input checked=&#34;checked&#34; class=&#34;column-vis&#34; data-column-group=&#34;8&#34; id=&#34;babda357-ae2e-41fe-8434-4bf43a969c6d&#34; type=&#34;checkbox&#34; /&gt;Vanity&lt;/label&gt;&lt;label for=&#34;ca231149-ec2b-4235-b797-5616461190d7&#34;&gt;&lt;input checked=&#34;checked&#34; class=&#34;column-vis&#34; data-column-group=&#34;9&#34; id=&#34;ca231149-ec2b-4235-b797-5616461190d7&#34; type=&#34;checkbox&#34; /&gt;Traffic&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;test-row-count test-control-select&#34;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;col-xs-12 test-attached-filters&#34;&gt;&lt;/div&gt;&lt;/th&gt;&lt;/tr&gt;&lt;tr class=&#34;column-grouping&#34;&gt;&lt;th class=&#34;row-status-color&#34;&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th colspan=&#34;1&#34; data-column-group=&#34;1&#34;&gt;&lt;/th&gt;&lt;th colspan=&#34;1&#34; data-column-group=&#34;2&#34;&gt;&lt;/th&gt;&lt;th colspan=&#34;1&#34; data-column-group=&#34;3&#34;&gt;&lt;/th&gt;&lt;th colspan=&#34;1&#34; data-column-group=&#34;4&#34;&gt;&lt;/th&gt;&lt;th colspan=&#34;6&#34; data-column-group=&#34;5&#34; style=&#34;background:rgb(109, 56, 107); color:#FFF;&#34;&gt;Schedule&lt;/th&gt;&lt;th colspan=&#34;5&#34; data-column-group=&#34;6&#34; style=&#34;background:rgb(204, 155, 56); color:#FFF;&#34;&gt;Authentication&lt;/th&gt;&lt;th colspan=&#34;3&#34; data-column-group=&#34;7&#34; style=&#34;background:rgb(192, 105, 119); color:#FFF;&#34;&gt;Device&lt;/th&gt;&lt;th colspan=&#34;7&#34; data-column-group=&#34;8&#34; style=&#34;background:rgb(150, 150, 116); color:#FFF;&#34;&gt;Vanity&lt;/th&gt;&lt;th class=&#34;last&#34; colspan=&#34;5&#34; data-column-group=&#34;9&#34; style=&#34;background:rgb(138, 126, 149); color:#FFF;&#34;&gt;Traffic&lt;/th&gt;&lt;/tr&gt;&lt;tr class=&#34;column-headers&#34;&gt;&lt;th class=&#34;row-status-color&#34;&gt;&lt;/th&gt;&lt;th class=&#34;select-all-rows&#34;&gt;&lt;input class=&#34;check-all-rows&#34; type=&#34;checkbox&#34; /&gt;&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;1&#34; data-source-id=&#34;49421&#34;&gt;Name&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;2&#34; data-source-id=&#34;56844&#34;&gt;Zone&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;3&#34; data-source-id=&#34;49426&#34;&gt;Status&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;4&#34; data-source-id=&#34;49427&#34;&gt;Roamable&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;5&#34; data-source-id=&#34;56841&#34;&gt;Recurrence&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;5&#34; data-source-id=&#34;56842&#34;&gt;Limit&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;5&#34; data-direction=&#34;ascending&#34; data-source-id=&#34;49424&#34;&gt;From&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;5&#34; data-source-id=&#34;49425&#34;&gt;Until&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;5&#34; data-source-id=&#34;56852&#34;&gt;Preparation Period&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;5&#34; data-source-id=&#34;56853&#34;&gt;Cleanup Period&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;6&#34; data-source-id=&#34;56855&#34;&gt;Default Access Code&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;6&#34; data-source-id=&#34;56856&#34;&gt;Bandwidth&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;6&#34; data-source-id=&#34;56857&#34;&gt;Priority Access Code&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;6&#34; data-source-id=&#34;56858&#34;&gt;Bandwidth&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;6&#34; data-source-id=&#34;49431&#34;&gt;Alert Threshold&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;7&#34; data-source-id=&#34;49432&#34;&gt;Limit&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;7&#34; data-source-id=&#34;49434&#34;&gt;Alert Threshold&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;7&#34; data-source-id=&#34;49433&#34;&gt;Currently Active&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;8&#34; data-source-id=&#34;56849&#34;&gt;SSID&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;8&#34; data-source-id=&#34;56851&#34;&gt;SSID Grace Period&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;8&#34; data-source-id=&#34;56850&#34;&gt;Hide&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;8&#34; data-source-id=&#34;56846&#34;&gt;Encryption&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;8&#34; data-source-id=&#34;56847&#34;&gt;Protocol&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;8&#34; data-source-id=&#34;56848&#34;&gt;Key&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;8&#34; data-source-id=&#34;56845&#34;&gt;VLAN&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;9&#34; data-source-id=&#34;49438&#34;&gt;Upload&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;9&#34; data-source-id=&#34;49440&#34;&gt;Packets&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;9&#34; data-source-id=&#34;49439&#34;&gt;Download&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;9&#34; data-source-id=&#34;49441&#34;&gt;Packets&lt;/th&gt;&lt;th class=&#34;column-sortable check-active&#34; data-column-group=&#34;9&#34; data-source-id=&#34;49437&#34;&gt;Logging&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr class=&#34;data-row&#34; data-anch-target=&#34;28&#34;&gt;&lt;td class=&#34;row-status-color&#34; style=&#34;background: rgb(109, 56, 107)&#34;&gt;&lt;/td&gt;&lt;td class=&#34;selecting&#34;&gt;&lt;input class=&#34;check&#34; type=&#34;checkbox&#34; value=&#34;28&#34; /&gt;&lt;/td&gt;&lt;td class=&#34;expand bold&#34; data-column-group=&#34;1&#34;&gt;Test&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;2&#34;&gt;Guest&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;3&#34;&gt;Active&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;4&#34;&gt;&lt;span class=&#34;icon-no&#34;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;5&#34;&gt;Once&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;5&#34;&gt;0&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;5&#34;&gt;2016-03-08 00:00:00&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;5&#34;&gt;2016-03-09 18:00:00&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;5&#34;&gt;01:00:00&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;5&#34;&gt;01:00:00&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;6&#34;&gt;standard&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;6&#34;&gt;Regular Speed Conference&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;6&#34;&gt;best&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;6&#34;&gt;Complimentary Low Speed (Lobby)&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;6&#34;&gt;90&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;7&#34;&gt;3&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;7&#34;&gt;70&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;7&#34;&gt;0&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;8&#34;&gt;UAT_Test_SSID&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;8&#34;&gt;00:30:00&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;8&#34;&gt;&lt;span class=&#34;icon-no&#34;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;8&#34;&gt;None&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;8&#34;&gt;WPA_CCMP&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;8&#34;&gt;&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;8&#34;&gt;UAT_CONFERENCE&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;9&#34;&gt;0&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;9&#34;&gt;0&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;9&#34;&gt;0&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;9&#34;&gt;0&lt;/td&gt;&lt;td class=&#34;expand&#34; data-column-group=&#34;9&#34;&gt;&lt;span class=&#34;icon-no&#34;&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;
</code></pre>

<p>如果您在 JS Fiddle 示例中展开窗口，您将看到基于屏幕宽度隐藏和显示的列。</p>

<p>我知道这有点粗糙，但我们将不胜感激。</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>bootstrap 将 100% 分配为表格宽度和表格最大宽度，因此在 Safari 中，您的 <code>if ($parent.width() < $that.width())</code> 不起作用，因为 <code> </code> 是表格，与窗口一样大，而不是更大。 </p>

<p>只需添加</p>

<pre><code>.table {
    width: intrinsic;
    max-width:intrinsic;
}
</code></pre>

<p>到你的css，你就完成了</p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 基于宽度计算的表格列显示和隐藏在 Safari IOS 设备中不起作用，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/35918324/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/35918324/
                                                        </a>
                                                </p>
                                       

查看完整版本: javascript - 基于宽度计算的表格列显示和隐藏在 Safari IOS 设备中不起作用