code-8
Reputation: 58632
Hide the entire HTML DOM except specific DOM
I'm trying to hide everything in the body except the table
I've tried
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);
The whole thing seems to be hidden. If you know please help.
<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="<span class="jira-issue-status-tooltip-title">Awaiting QA</span><br><span class="jira-issue-status-tooltip-desc">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.</span>">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">
</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="<span class="jira-issue-status-tooltip-title">Awaiting QA</span><br><span class="jira-issue-status-tooltip-desc">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.</span>">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">
</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="<span class="jira-issue-status-tooltip-title">Awaiting QA</span><br><span class="jira-issue-status-tooltip-desc">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.</span>">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>Upvotes: 0
Views: 53
Answers (1)
paulokrg
Reputation: 83
Since the table you are trying to show is inside the body of the document, you can't use display: none; in the whole body tag.
Instead you have to use display: none; on all the body tag direct childs, except the one you are trying to display.
The only CSS you need for this is:
body > *:not(issuetable-web-component) {
display: none;
}
If you have more than one <issuetable-web-component> tag in your document you will need to apply an id or class to it.
HTML:
<issuetable-web-component class="visible">
</issuetable-web-component>
CSS:
body > *:not(.visible) {
display: none;
}
Now that you know what CSS you need to apply to your document, you can do it with Javascript using the following:
const css = `
body > *:not(.visible) {
display: none;
}
`;
let style = document.createElement("style");
style.innerHTML = css;
document.head.appendChild(style);
Upvotes: 1
Related Questions
- how to hide a particular div tag
- How to hide DOM elements
- How to hide html tag content in JavaScript?
- Hide all elements of a page except a specific div
- How to hide all element on html page except one div using css?
- Hide only on certain elements
- How to hide html elements without HTML dom using JavaScript?
- Hide All Except Specific Child Element Content
- How can I hide a div completely from HTML DOM?
- How can I hide any DOM element