Conceal the full HTML DOM with the exception of designated DOM elements

I'm attempting to conceal everything in the body except for the table

I've given this a shot:

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);

It seems like everything is being hidden. If you have any insights, please share.


<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;
  
                

Answer №1

To hide a table that is within the body of your document, you cannot simply use display: none; on the entire body tag.

Instead, you must target all direct children of the body tag except for the one containing the table you want to display.

You can achieve this with the following CSS:

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

If there are multiple instances of <issuetable-web-component> in your document, consider assigning an id or class to differentiate them.

HTML structure:

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

CSS to show only the specified element:

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

To apply the necessary CSS using JavaScript, you can use the following code snippet:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the simplest method for moving cells between two tables using drag and drop?

Is there a way to select random cells from a table and move them to another table using drag and drop functionality? I'm looking for a library that can help achieve this with JavaScript and PHP. Additionally, I need to save the ID of the selected cel ...

A step-by-step guide on integrating Validate.js into your Vue.js project

As a novice full stack developer, I am embarking on the journey of building a portal for my work. The server side will be developed in asp.net mvc 5, while the client side (HTML, CSS, SASS, JS) has been developed by another company. My task is to handle se ...

Enhance the grid system layout by inserting spaces between columns while maintaining the overall structure

I need to adjust the spacing between columns without disrupting the grid system layout. Adding margin to the cards results in only 3 cards per row instead of 4. Below is the code snippet that I'm struggling with. The challenge lies in controlling the ...

The route is displaying the variable as 'undefined' when I attempt to access it

I had set up CRUD for two different models (venues & artists) - venues works fine, but when I try to access 'artists/index', it gives me an error saying 'Artists is not defined'. After examining the code, I believe I need to do two ...

Using Regular Expressions to extract tables from an HTML string in PHP

When it comes to making tables usable for mobile devices, I have a strategy of wrapping them in a special div container within my content. However, I face a challenge when trying to wrap the tables before they are saved in the custom CSS database. I have f ...

The attribute "property" is not found in the specified type of "Request<ParamsDictionary>"

Struggling to enhance the Request interface in the express package with custom properties, I keep encountering this TypeScript error: TS2339: Property '' does not exist on type 'Request<ParamsDictionary>'. Any ideas on how to re ...

Perform the script only when a click event occurs

I need help with a script that will only refresh the page when a specific link is clicked. Currently, the script is running on page load instead of waiting for the click event. As someone who is not familiar with JavaScript, I am struggling to figure this ...

Utilizing the mouse hover feature to toggle between hiding and displaying content in its original position

I am struggling with creating a mouse hover function that allows me to hide and show two pictures in the same position. Essentially, I want one picture to stay in place while another picture appears on top of it when hovered over. Both pictures should be t ...

Hey Node, what is the process for setting response headers in a node/express application?

I am currently working on a project with a basic server setup. One of the requirements is that I need to ensure the response header sent back is 200. I have included the current code for the server below, but I am unsure about how to properly send respon ...

Create a dynamic flex box layout to achieve the "space-between" effect with variable-sized items

I am trying to achieve the same effect as justify-content and align-items with the value "space-between" on my flex box, but I am facing a challenge because there is no static width/height for the flexbox. Using margins adds space to all sides, whereas I o ...

Drop down selection causing Highchart display issue

I'm experimenting with displaying a div that contains a Highchart in this code snippet: http://jsfiddle.net/ot24zrkt/129/ This line should reveal the container: $('#container' + $(this).val()).show();? Fiddle code: <script src="https:/ ...

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

Get hexa values from a colorpicker and use them as a background in an angularjs application

I'm currently working on an angularJS project and I've implemented an HTML color picker. My goal is to assign the selected color from the color picker to my div element, ensuring that the values are in hexadecimal format. Below is a snippet of my ...

Is there a way to ajax just specific HTML table rows instead of transmitting all the form inputs?

For weeks, I've been struggling to use AJAX POST with a JSP script to update my HTML table rows without success. Can anyone provide guidance on this? Below is what I have attempted so far. window.addEventListener("DOMContentLoaded", function () { ...

The React functional component fails to display on the screen

When the validate function is called, it is expected to return an element if the getConjugation function does not return an error. However, even when valid input is passed to getConjugation, it only displays nothing in the browser. import React from &apos ...

What is the process for transmitting information via a Link in Next.js?

In my upcoming 13.1.5 version, I am faced with a challenge of sending the value of contact.name through a Link in my component. I am looking for the most effective approach to achieve this. The initial code block for the Link represents my original code. ...

How can recursive data be displayed in a template?

I am working with a model in Django that has a ForeignKey pointing to itself, and I need to display all the data from the database using lists and sublists: Below is my model definition: class Place(models.Model) name = models.CharField(max_length=1 ...

What is the best method to conceal the tooltip using the html <a> title attribute?

Is there a way to prevent the tooltip from displaying when hovering over links, while still keeping the title attribute for SEO purposes? I have come across suggestions like using jQuery with $('...').removeAttr('title'), but will this ...

Finding the Xpath for an element that contains only a span tag, with identical attributes except for the text within

I am struggling to find the xpath for a button element that says 'Cancel'. <div class="uipresk"> <button class="something" role="button" type="button"> <span class="thisthing">OK</span> </button> ...

Observing for form input in Nuxt.js

There is a form on my webpage, which includes the following elements: <div v-if="this.userdata.address == ''">Please enter your address</div> Your address <input type="text" v-model="userdata.address" ...