Parse HTML Table and hide columns

Question

I have this basic HTML table that I export from JIRA. I need a quick way to hide all columns and show only 2 columns (Key + Summary).

Please see the image below.

I know that there will be more than one way to skin this cat like python, nodejs, and even PHP. But I'm looking for the best fastest & lightest way to achieve it, I was thinking JS since we all have access to it directly in our Console so

const someStyle = `
<style>
    th  { display:none; }
    th:nth-child(2),th:nth-child(4)  { display:block; }
</style>
`;


document.head.insertAdjacentHTML('beforeend', someStyle);

This doesn't work.

#HTML

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

Check out [this answer](https://stackoverflow.com/a/524721/11423104). — isaactfa, May 18 '22 at 13:23

G-Cyrillus · Accepted Answer · 2022-05-18T13:52:44.730

There is a few mistakes, td are not minded and th/td default display is table-cell ;)

Here is how i would do: (create a style element,innerHTML style to it and then append it to head)

const someStyle = `
    #issuetable th ,#issuetable td,
    table:not([id]) { display:none; }
    #issuetable th:nth-child(2),#issuetable th:nth-child(5),
    #issuetable td:nth-child(2),#issuetable td:nth-child(5){ display:table-cell; }
`;
let style = document.createElement('style');
style.innerHTML = someStyle;
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>

Rather 2,4. It's columns 3,5. Other than that codes working perfect. Thanks for your help sir! — code-8, May 18 '22 at 13:35
One last bonus question, how do I hide all DOMs, but keep the table ? Then I won't see other extra things on the top/bottom of my table after hide the columns. — code-8, May 18 '22 at 13:36
*Then I won't see other extra things on the top/bottom of my table after hide the columns.* @code-8 Sorry, i do not understand what are these things you see, is it about other element outside #issuetable ? — G-Cyrillus, May 18 '22 at 13:39
@G-Cyrillus I was just trying to hide stuff outside of the table, but it didn't work. — Roman, May 18 '22 at 13:45
Okay, updated the snippet and included selector `.end-of-stable-message + table ` to the display:none rule . Is that fine ? or may be `table:not([id]){display:none}` it will hide every tables without an id . — G-Cyrillus, May 18 '22 at 13:48
As far as I understand it, @code-8 wants to hide everything that comes both before and after the table.. `.end-of-stable-message + table` just gets rid of the table after. Therefore the approach with `:not`... `#issuetable :is(th,td):not(:nth-child(3), :nth-child(5)), body :not(#issuetable, #issuetable *) { display:none; }` — Roman, May 18 '22 at 14:12
@Roman from the code given, there is only tables inside body ;) — G-Cyrillus, May 18 '22 at 14:14

Parse HTML Table and hide columns

1 Answers1

Linked