PowerShell+PSWriteHTML实现表格行点击仅显示对应图表

核心思路 #

给每个图表区块绑定与表格行对应的唯一标识，通过JavaScript监听表格行的点击事件，隐藏所有图表区块，仅显示点击行匹配的图表。

修改后的完整代码 #

$DT_P_i = 0
$DataTable = @()   
for(($l_i=0); ($l_i -lt 10); ($l_i++))
{
   $DataTable += @(
      [PSCustomObject] @{
         Names = "My Name " + $l_i.ToString()
         Procc = @()
      }
   )

   for (($l_j = 0); ($l_j -lt 2); ($l_j++))
   {
      $DT_P_I++
      
      $DataTable[$l_i].Procc += @(
         [PSCustomObject]@{
            PNames = "Procc " + $DT_P_I.ToString()
            Times = @()
            Values = @()
         }
      )

      for (($l_v = 0); ($l_v -lt 3); ($l_v++))
      {
         $DataTable[$l_i].Procc[$l_j].Times += $l_v.ToString()
         $DataTable[$l_i].Procc[$l_j].Values += $l_v.ToString()
      }
   }
}

$DT_Unique = $DataTable.Names | Get-Unique -AsString
   
$Table_N_PN = @()

foreach ($DT in $DataTable)
{
   foreach ($DTP in $DT.Procc)
   {
      $Table_N_PN += @(
         [PSCustomObject]@{
            Name=$DT.Names
            PName =$DTP.PNames
         }
      )
   }
}


$TableProcesses = "TableProcesses"

New-HTML -TitleText 'Names - Processes - Charts' -Online -FilePath $PSScriptRoot\Test.html {
   # 注入点击切换逻辑的自定义脚本
   New-HTMLScript -ScriptBlock {
      @'
      document.addEventListener('DOMContentLoaded', function() {
          // 获取所有带chart-section类的图表区块
          const chartBlocks = document.querySelectorAll('.chart-section');
          // 获取Names表格的所有数据行
          const nameRows = document.querySelectorAll('#table0 tbody tr');

          // 默认隐藏所有图表，仅显示第一个（可根据需求调整）
          chartBlocks.forEach((block, idx) => {
              block.style.display = idx === 0 ? 'block' : 'none';
          });

          // 给每个表格行绑定点击事件
          nameRows.forEach(row => {
              row.addEventListener('click', function() {
                  const targetName = this.querySelector('td').textContent.trim();
                  // 遍历图表区块，匹配对应Name后显示，其余隐藏
                  chartBlocks.forEach(block => {
                      const blockTitle = block.querySelector('h2').textContent;
                      block.style.display = blockTitle.includes(targetName) ? 'block' : 'none';
                  });
              });
          });
      });
'@
   }

   New-HTMLSection -HeaderText "TABLE: Names and Processes" -HeaderTextSize 25{
      New-HTMLTable -DataTable $DT_Unique -PreContent{"<h1>Names</h1>"}
      New-HTMLTable -DataTable $Table_N_PN -DataTableID $TableProcesses -PreContent{"<h1>Processes</h1>"}
   }

   New-HTMLSection -HeaderText "Charts" -HeaderTextSize 25{
      New-HTMLPanel{ 

         $BGcolors = [enum]::GetValues([System.ConsoleColor]) 
         [bool]$l_show_yellow = $false

         foreach ($Object in $DataTable) {

            if ($l_show_yellow -eq $true) {$l_show_yellow = $false; $Color = $BGcolors[1]; } else {$l_show_yellow = $true; $Color = $BGcolors[14]; }
            $str = "Chart for : " + $Object.Names
            # 给图表区块添加自定义类和唯一ID，方便JS定位
            New-HTMLSection -HeaderText $str -HeaderTextSize 20 -BackgroundColor $Color -Attributes @{class='chart-section'; id="chart_$($Object.Names.Replace(' ', '_'))"}{ 
               New-HTMLPanel{   
                  foreach ($Pr in $Object.Procc) {
                     $str = $Pr.PNames
                     New-HTMLSection -HeaderText $str  -HeaderTextSize 14{ 
                        New-HTMLPanel -BackgroundColor White{   
                           New-HTMLChart {
                              New-ChartAxisX -Names $Pr.Times
                              New-ChartLine -Name $Pr.PNames -Value $Pr.Values
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }
} -ShowHTML

修改要点说明 #

1. 添加自定义脚本：通过New-HTMLScript注入DOM监听逻辑，页面加载完成后绑定表格行的点击事件。
2. 标记图表区块：给每个图表的New-HTMLSection添加chart-section类和唯一ID，让JavaScript能精准定位到对应区块。
3. 切换逻辑实现：点击表格行时提取Name文本，匹配图表区块的标题内容，显示目标区块并隐藏其他所有区块。
4. 初始显示设置：默认显示第一个图表，也可修改为全隐藏，需用户点击后才展示对应图表。

内容的提问来源于stack exchange，提问作者Dimitris