如何基于前置class的值生成动态链接

后端PHP解决方案（推荐） #

针对近千条数据的场景，后端批量生成链接是最优选择，既避免前端依赖，也能保证页面加载性能和SEO友好性。

1. 定义链接生成函数
   先写一个可复用的函数，传入num值后自动拼接对应链接：

<?php
function generateCrimLink($num) {
    // 通过变量插值替换固定的XXXX部分
    return "<a href='../images/vinyl/crim/numbers/{$num}.jpg'>Link</a>";
}
?>

2. 循环渲染表格
   将表格数据整理为数组或从数据库读取（近千条数据不可能手动编写HTML），通过循环批量输出每行内容，同时将当前行的num值传入函数生成链接：

<tbody>
<?php
// 示例：假设$data是包含所有行数据的数组，每个元素包含bluewhite、num、name字段
$data = [
    ['bluewhite' => 'xxx', 'num' => '0002', 'name' => 'Name'],
    ['bluewhite' => 'xxx', 'num' => '0004', 'name' => 'Name'],
    // 更多数据...
];

foreach ($data as $row) {
?>
    <tr>
        <td><?php echo $row['bluewhite']; ?></td>
        <td class="num"><?php echo $row['num']; ?></td>
        <td><?php echo $row['name']; ?></td>
        <td><?php echo generateCrimLink($row['num']); ?></td>
    </tr>
<?php
}
?>
</tbody>

前端JavaScript解决方案（后端无法修改时使用） #

如果后端代码暂时无法调整，可以用JS在页面加载后自动替换链接内容：

document.addEventListener('DOMContentLoaded', function() {
    // 遍历所有带num类的单元格
    document.querySelectorAll('td.num').forEach(numCell => {
        const num = numCell.textContent.trim();
        // 定位当前行的链接单元格
        const linkCell = numCell.parentElement.querySelector('td:last-child');
        // 生成并替换链接
        linkCell.innerHTML = `<a href="../images/vinyl/crim/numbers/${num}.jpg">Link</a>`;
    });
});

注意事项 #

• 优先选择后端方案：前端方案依赖JavaScript，若用户浏览器禁用JS，链接会失效；后端生成的静态HTML兼容性和稳定性更好。
• 数据必须循环输出：近千条数据手动编写HTML效率极低且易出错，建议从数据库或CSV/Excel文件导入数据到数组中批量处理。

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