解析 HTML Table 并隐藏列

Parse HTML Table and hide columns

我有这个从 JIRA 导出的基本 HTML table。我需要一种快速隐藏所有列并仅显示 2 列的方法 (Key + Summary).

请看下图

我知道给这只猫换皮的方法不止一种，比如 python、nodejs，甚至 PHP。但我正在寻找实现它的 最好 最快和最轻的方法，我在想 JS 因为我们都可以直接在我们的 控制台中访问它 所以

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


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

这行不通。

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

有一些错误，td 不介意 th/td 默认显示是 table-cell ;)

我会这样做：（创建一个样式元素，innerHTML 样式，然后将其附加到头部）

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>