如何在PowerShell生成的HTML输出中实现搜索功能？

我来帮你搞定这个问题！你遇到的搜索功能失效，大概率是PowerShell生成的HTML结构和你的JS/CSS没有正确匹配，或者JS的执行时机不对。下面是一套完整的解决方案，把PowerShell输出、样式和搜索功能完美整合：

一、完整的PowerShell脚本示例 #

这个脚本会生成包含搜索框的HTML页面，以Windows服务列表作为示例输出，你可以替换成自己的PowerShell输出内容：

# 定义HTML头部（包含CSS和搜索功能的JS）
$htmlHead = @"
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }
        #myInput {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            width: 100%;
            font-size: 16px;
            padding: 12px 20px 12px 40px;
            border: 1px solid #ddd;
            margin-bottom: 12px;
        }
        #myTable {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid #ddd;
            font-size: 18px;
        }
        #myTable th, #myTable td {
            text-align: left;
            padding: 12px;
        }
        #myTable tr {
            border-bottom: 1px solid #ddd;
        }
        #myTable tr.header, #myTable tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <input type="text" id="myInput" placeholder="搜索内容...">
    <table id="myTable">
        <tr class="header">
            <th>服务名称</th>
            <th>显示名称</th>
            <th>状态</th>
        </tr>
"@

# 生成PowerShell输出的表格行（这里以Windows服务为例，替换成你的输出）
$tableRows = Get-Service | ForEach-Object {
    @"
        <tr>
            <td>$($_.Name)</td>
            <td>$($_.DisplayName)</td>
            <td>$($_.Status)</td>
        </tr>
"@
}

# 定义HTML尾部（包含搜索功能的JS）
$htmlFoot = @"
    </table>
    <script>
        // 确保DOM加载完成后再绑定事件
        document.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('myInput');
            const table = document.getElementById('myTable');
            const rows = table.getElementsByTagName('tr');

            input.addEventListener('keyup', function() {
                const filter = input.value.toUpperCase();
                // 跳过表头行，从第2行开始遍历
                for (let i = 1; i < rows.length; i++) {
                    const cells = rows[i].getElementsByTagName('td');
                    let isMatch = false;
                    // 遍历当前行的所有单元格
                    for (let j = 0; j < cells.length; j++) {
                        const cellText = cells[j].textContent || cells[j].innerText;
                        if (cellText.toUpperCase().indexOf(filter) > -1) {
                            isMatch = true;
                            break;
                        }
                    }
                    // 根据匹配结果显示/隐藏行
                    rows[i].style.display = isMatch ? '' : 'none';
                }
            });
        });
    </script>
</body>
</html>
"@

# 拼接所有内容并保存为HTML文件
$fullHtml = $htmlHead + $tableRows + $htmlFoot
$fullHtml | Out-File -FilePath "C:\temp\Services_With_Search.html" -Encoding UTF8

二、为什么你的搜索功能失效？关键修复点 #

我帮你梳理了几个常见问题，对应上面的解决方案：

• DOM元素ID不匹配：你的JS代码需要找到#myInput（搜索框）和#myTable（表格），所以PowerShell生成的HTML里必须有这两个ID，上面的脚本已经严格对应。
• JS执行时机错误：如果JS在表格渲染前就执行，会找不到表格元素。上面用DOMContentLoaded事件确保JS在页面完全加载后再运行。
• 搜索范围有限：原来的JS可能只搜索第一列，上面的代码会遍历每一行的所有单元格，确保任何列的内容都能被搜索到。
• 搜索图标路径问题：你原来用的/css/searchicon.png可能路径不对，上面用内嵌的SVG图标替代，避免路径依赖。

三、自定义替换说明 #

你可以根据自己的需求修改：

• 把Get-Service替换成你的PowerShell命令，生成对应的表格行
• 调整CSS样式（比如颜色、字体、间距）来匹配你的需求
• 修改表头和表格列数，对应你的输出数据

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