求助：Bash脚本生成的HTML中进程输出无法显示为表格格式

你的核心问题是把多行的进程数据塞进了单个HTML表格行的单元格里，同时还存在HTML结构错误和变量名写错的问题：

• 原脚本中$pids、$times都是包含6行内容的变量，直接放到<td>里会把所有PID堆在一个单元格，不会自动生成多行表格行
• HTML里误写了变量名：$process应该是$processes
• 重复嵌套了.tab-content容器，导致Bootstrap标签页逻辑混乱
• 进程表格里的「Total User」列没有对应数据，属于冗余内容

下面是修正后的完整脚本，直接解决所有问题：

#!/bin/bash
# 一次提取TOP6进程并直接生成HTML表格行，避免多次调用ps
top_process_rows=$(ps -eo pid,%cpu,cmd --sort=-%cpu | awk 'NR <= 6 && NR > 1 { # 跳过表头行
    printf "<tr><th scope=\"row\">%s</th><td>%s</td><td>%s</td></tr>\n", $1, $2, substr($0, index($0,$3))
}')

# 控制台展示表格（保留原逻辑）
echo -e "\n***************Top 6 CPU-Consuming Processes************"
echo -e "PID\t%CPU\tProcess"
ps -eo pid,%cpu,cmd --sort=-%cpu | awk 'NR <= 6' | column -t

# 写入日志（保留原逻辑）
echo -e "\n**********Top CPU-Consuming Processes**********" >> Automation.log
echo -e "PID\t%CPU\tProcess" >> Automation.log
ps -eo pid,%cpu,cmd --sort=-%cpu | awk 'NR <= 6' | column -t >> Automation.log

# 生成HTML文件（指定你的文件名）
html_file="process_report.html"
cat <<EOF > "$html_file"
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <special-header></special-header>
   
    <main>
        <section id="image">
            <img src="images/linux.png" alt="Linux Image" class="medium-image center-image">
        </section>
        <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#option1">User Logged info</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#option2">Current Process</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#option3">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#option4">Disabled</a>
            </li>
        </ul>
        <div class="tab-content">
            <!-- 用户登录信息标签页 -->
            <div id="option1" class="tab-pane fade show active">
                <h3>Users Logged in system</h3>
                <br>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">User Name</th>
                            <th scope="col">Date</th>
                            <th scope="col">Time</th>
                            <th scope="col">Total User</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">$username_logged</th>
                            <td>$date_logged</td>
                            <td>$time_logged</td>
                            <td>$total_user_logged</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- TOP6进程标签页 -->
            <div id="option2" class="tab-pane fade">
                <h3>Top 6 CPU-Consuming Processes</h3>
                <br>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">PID</th>
                            <th scope="col">%CPU</th>
                            <th scope="col">Process</th>
                        </tr>
                    </thead>
                    <tbody>
                        $top_process_rows
                    </tbody>
                </table>
            </div>
            <!-- 其他标签页 -->
            <div id="option3" class="tab-pane fade">
                <h3>Link</h3>
                <p>Link content here</p>
            </div>
        </div>
    </main>
    <special-footer></special-footer>
    <script src="./header.js"></script>
</body>
</html>
EOF

关键修改说明 #

1. 数据提取优化：只调用一次ps，用awk直接生成HTML格式的表格行，substr($0, index($0,$3))确保完整提取带空格的进程命令，避免截断。
2. HTML结构修复：
   • 合并重复的.tab-content容器，所有标签页放在同一个容器下
   • 修正标签页激活状态：仅默认展示的option1设为active，其他标签页保持fade状态
   • 删除进程表格中无数据的「Total User」列
3. 变量使用修正：用预生成的HTML行变量$top_process_rows直接填充<tbody>，自动生成6行进程数据。

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