javascript - 隐藏除特定 DOM 之外的整个 HTML DOM

我试图隐藏身体中的所有东西,除了 table

我试过了

body:not(#issuetable) { display:none; }

const css = `
    body:not(#issuetable) { display:none; }
    #issuetable th ,#issuetable td  { display:none; }
    #issuetable th:nth-child(3),#issuetable th:nth-child(5),
    #issuetable td:nth-child(3),#issuetable td:nth-child(5){ display:table-cell; }
`;
let style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);

整个事情似乎被隐藏起来了。如果你知道请帮忙。

<html xmlns:o="urn:schemas-microsoft-com:office:office"
      xmlns:x="urn:schemas-microsoft-com:office:excel"
      xmlns="http://www.w3.org/TR/REC-html40">
    <head>
        <title>John's Done  (Apple Project Management)</title>
        <style type="text/css">
         table {
             mso-displayed-decimal-separator:"\.";
             mso-displayed-thousand-separator:"\,";
         }
         body
         {
             margin: 0px;
             font-size: 12px;
             font-family: Arial, sans-serif;
             color:black;
         }

        </style>
        <META HTTP-EQUIV="Content-Type" Content="application/vnd.ms-excel; charset=UTF-8">
        <!-- JRA-7598 - ensure fields (e.g. description) occupy only one cell - even fields containing newlines. -->
        <!--
             Vertical align all cells to the top, in order to align all issue rows of issuetable to the top,
             since Excel does not use or save the css files it is hardcoded here.
           -->
        <style>
         @page
         {
             mso-page-orientation:landscape;
             margin:.25in .25in .5in .25in;
             mso-header-margin:.5in;
             mso-footer-margin:.25in;
             mso-footer-data:"&R&P of &N";
             mso-horizontal-page-align:center;
             mso-vertical-page-align:center;
         }

         td.issuekey,
         td.issuetype,
         td.status {
             mso-style-parent: "";
             mso-number-format: \@;
             text-align: left;
         }
         br
         {
             mso-data-placement:same-cell;
         }

         td
         {
             vertical-align: top;
         }
        </style>

        <!--[if gte mso 9]><xml>
            <x:ExcelWorkbook>
            <x:ExcelWorksheets>
            <x:ExcelWorksheet>
            <x:Name>general_report</x:Name>
            <x:WorksheetOptions>
            <x:Print>
            <x:ValidPrinterInfo/>
            </x:Print>
            </x:WorksheetOptions>
            </x:ExcelWorksheet>
            </x:ExcelWorksheets>
            </x:ExcelWorkbook>
            </xml><![endif]-->
    </head>
    <body>

        <table border="1">
            <tr bgcolor="#0747a6" height="30">
                <td colspan="11">
                    <img src="http://dev.apple.local:1234/images/jira-software.png" width="57" height="30" border="0" alt="John's Done  (Apple Project Management)">
                </td>
            </tr>
            <tr>
                <td colspan="11">
                    <a href="http://dev.apple.local:1234/issues/?filter=11526">John's Done  (Apple Project Management)</a>
                </td>
            </tr>
            <tr>
                <td colspan="11">
                    Displaying <strong>3</strong> issues at <strong>18/May/22 12:56 PM</strong>.
                </td>
            </tr>
        </table>

        


                            <issuetable-web-component data-content="issues">
                <table id="issuetable"  border="1" cellpadding="3" cellspacing="1" width="100%">
                        <thead>
        <tr class="rowHeader">
            
                                                            <th class="colHeaderLink headerrow-issuetype" data-id="issuetype">
                            Issue Type
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-priority" data-id="priority">
                            Priority
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-issuekey" data-id="issuekey">
                            Key
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-status" data-id="status">
                            Status
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-summary" data-id="summary">
                            Summary
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-assignee" data-id="assignee">
                            Assignee
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-customfield_10100" data-id="customfield_10100">
                            Sprint
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-issuelinks" data-id="issuelinks">
                            Linked Issues
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-customfield_10101" data-id="customfield_10101">
                            Epic Link
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-updated" data-id="updated">
                            Updated
                                                    </th>
                                                
                                                            <th class="colHeaderLink headerrow-duedate" data-id="duedate">
                            Due Date
                                                    </th>
                                                                    </tr>
    </thead>
    <tbody>
                    

                <tr id="issuerow14995" rel="14995" data-issuekey="TI-325" class="issuerow">
                                            <td class="issuetype">    Bug
</td>
                                            <td class="priority">           High
    </td>
                                            <td class="issuekey">

    <a class="issue-link" data-issue-key="TI-325" href="http://dev.apple.local:1234/browse/TI-325">TI-325</a>
</td>
                                            <td class="status">
                <span class=" jira-issue-status-lozenge aui-lozenge jira-issue-status-lozenge-blue-gray jira-issue-status-lozenge-new aui-lozenge-subtle jira-issue-status-lozenge-max-width-medium" data-tooltip="&lt;span class=&quot;jira-issue-status-tooltip-title&quot;&gt;Awaiting QA&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;jira-issue-status-tooltip-desc&quot;&gt;Awiting QA approval is defined as the QA manager has tested based on the feature requirements.  During this phase the reporter/business contact that requested this feature needs to also test and sign off on the feature.&lt;/span&gt;">Awaiting QA</span>    </td>
                                            <td class="summary"><p>
                Campaign - All Types - Values Not Being Passed on the UI (Export Factory XF Date)
    </p>
</td>
                                            <td class="assignee">            John Heng
    </td>
                                            <td class="customfield_10100"></td>
                                            <td class="issuelinks">                </td>
                                            <td class="customfield_10101">
            Bug Tracker - Go To Market May Release 2022
    </td>
                                            <td class="updated"> 18/May/22 12:34 AM </td>
                                            <td class="duedate">    &nbsp;
</td>
                    </tr>


                <tr id="issuerow14993" rel="14993" data-issuekey="TI-324" class="issuerow">
                                            <td class="issuetype">    Bug
</td>
                                            <td class="priority">           Medium
    </td>
                                            <td class="issuekey">

    <a class="issue-link" data-issue-key="TI-324" href="http://dev.apple.local:1234/browse/TI-324">TI-324</a>
</td>
                                            <td class="status">
                <span class=" jira-issue-status-lozenge aui-lozenge jira-issue-status-lozenge-blue-gray jira-issue-status-lozenge-new aui-lozenge-subtle jira-issue-status-lozenge-max-width-medium" data-tooltip="&lt;span class=&quot;jira-issue-status-tooltip-title&quot;&gt;Awaiting QA&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;jira-issue-status-tooltip-desc&quot;&gt;Awiting QA approval is defined as the QA manager has tested based on the feature requirements.  During this phase the reporter/business contact that requested this feature needs to also test and sign off on the feature.&lt;/span&gt;">Awaiting QA</span>    </td>
                                            <td class="summary"><p>
                Campaign - Edit Page - Rules Parameters DO NOT DISPLAY CORRECTLY
    </p>
</td>
                                            <td class="assignee">            John Heng
    </td>
                                            <td class="customfield_10100"></td>
                                            <td class="issuelinks">                </td>
                                            <td class="customfield_10101">
            Bug Tracker - Go To Market May Release 2022
    </td>
                                            <td class="updated"> 18/May/22 12:36 AM </td>
                                            <td class="duedate">    &nbsp;
</td>
                    </tr>


                <tr id="issuerow14987" rel="14987" data-issuekey="TI-318" class="issuerow">
                                            <td class="issuetype">    Bug
</td>
                                            <td class="priority">           Medium
    </td>
                                            <td class="issuekey">

    <a class="issue-link" data-issue-key="TI-318" href="http://dev.apple.local:1234/browse/TI-318">TI-318</a>
</td>
                                            <td class="status">
                <span class=" jira-issue-status-lozenge aui-lozenge jira-issue-status-lozenge-blue-gray jira-issue-status-lozenge-new aui-lozenge-subtle jira-issue-status-lozenge-max-width-medium" data-tooltip="&lt;span class=&quot;jira-issue-status-tooltip-title&quot;&gt;Awaiting QA&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;jira-issue-status-tooltip-desc&quot;&gt;Awiting QA approval is defined as the QA manager has tested based on the feature requirements.  During this phase the reporter/business contact that requested this feature needs to also test and sign off on the feature.&lt;/span&gt;">Awaiting QA</span>    </td>
                                            <td class="summary"><p>
                Rule Conditions have filled colored cells on Product and Marketing Campaign Detail
    </p>
</td>
                                            <td class="assignee">            John Heng
    </td>
                                            <td class="customfield_10100">CE Go To Market Sprint</td>
                                            <td class="issuelinks">                </td>
                                            <td class="customfield_10101">
            Bug Tracker - Go To Market May Release 2022
    </td>
                                            <td class="updated"> 18/May/22 12:53 PM </td>
                                            <td class="duedate">    20/May/22
</td>
                    </tr>
                </tbody>
    </table>
    </issuetable-web-component>
    <div class="end-of-stable-message"></div>
            <table border="1" >
<tr>
    <td bgcolor="#f5f5f5" colspan="11"><font size="1">
        Generated at Wed May 18 12:56:37 UTC 2022 by John Heng using Jira 8.12.1#812002-sha1:7c28d59557fed9c1e3e470d7ce83e486c2b409b6.
    </font></td>
</tr>
</table>

</body>
</html>

回答1

由于您尝试显示的 table 位于文档正文中,因此您不能在整个正文标记中使用 display: none;

相反,您必须在所有正文标记直接子项上使用 display: none;,但您要显示的标记除外。

您需要的唯一 CSS 是:

body > *:not(issuetable-web-component) {
    display: none;
}

如果您的文档中有多个 <issuetable-web-component> 标记,则需要对其应用 id 或类。

HTML:

<issuetable-web-component class="visible">
</issuetable-web-component>

CSS:

body > *:not(.visible) {
    display: none;
}

既然您知道需要将什么 CSS 应用于您的文档,您可以使用以下方法使用 Javascript 来完成:

const css = `
body > *:not(.visible) {
    display: none;
}
`;

let style = document.createElement("style");
style.innerHTML = css;
document.head.appendChild(style);

相似文章

reactjs - 如何让一个组件显示在另一个组件中?

现在我必须执行以下操作:显示酒店列表包括每个酒店的地址和图像然后显示酒店中有哪些房间按容量过滤这些房间到目前为止,我可以很好地显示酒店的名称、地址和图像,并且可以根据他们的1-5评级过滤这些,但我已经...

最新文章