如何基于PHP变量在表格中仅显示单个JSON对象？

一、PHP端提前过滤（从根源杜绝空行） #

直接在循环输出表格前，把不符合搜索条件的JSON对象从数组里过滤掉，这样循环时只生成匹配的行，根本不会出现空行。

示例代码：

<?php
// 假设你的JSON对象数组是 $data，搜索关键词存在 $search_var 中
$filtered_data = array_filter($data, function($item) use ($search_var) {
    // 替换成你实际要匹配的字段，比如匹配name字段
    return stripos($item['target_field'], $search_var) !== false;
});
?>

<table>
    <thead>
        <tr>
            <th>字段1</th>
            <th>字段2</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach($filtered_data as $obj): ?>
            <tr>
                <td><?php echo htmlspecialchars($obj['field1']); ?></td>
                <td><?php echo htmlspecialchars($obj['field2']); ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

• 用array_filter()配合匿名函数筛选数据，只保留符合条件的对象。
• stripos()实现不区分大小写的模糊匹配，要是需要精确匹配，直接用$item['target_field'] === $search_var即可。
• 加上htmlspecialchars()防止XSS注入，输出更安全。

二、前端JS正确隐藏行（修复之前隐藏失败的问题） #

如果需要前端实时无刷新过滤，那得确保JS逻辑正确，之前隐藏失败大概率是选择器或匹配逻辑出了问题。

示例代码：

<!-- 搜索栏 -->
<input type="text" id="searchInput" placeholder="输入关键词搜索...">

<table id="dataTable">
    <thead>
        <tr>
            <th>字段1</th>
            <th>字段2</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach($data as $obj): ?>
            <tr>
                <td><?php echo htmlspecialchars($obj['field1']); ?></td>
                <td><?php echo htmlspecialchars($obj['field2']); ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

<script>
const searchInput = document.getElementById('searchInput');
const tableRows = document.querySelectorAll('#dataTable tbody tr');

// 监听搜索框输入事件，实时过滤
searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase().trim();
    
    tableRows.forEach(row => {
        // 获取当前行的所有文本内容，统一转小写后判断是否包含搜索词
        const rowContent = row.textContent.toLowerCase();
        row.style.display = rowContent.includes(searchTerm) ? '' : 'none';
    });
});
</script>

• 核心逻辑：监听搜索框的input事件，每输入一个字符就触发过滤。
• 把搜索词和行内文本都转成小写，保证匹配不区分大小写。
• 用textContent获取整行的所有文本，确保能匹配到任意字段的内容，避免漏判。
• 要是之前隐藏失败，检查下是不是选择器写错了（比如没选中tbody里的tr），或者只匹配了单个字段导致逻辑不全。

选择建议 #

• 如果是提交搜索后刷新页面的场景，用第一种方案更高效，减少不必要的DOM生成。
• 如果需要用户实时输入、无刷新过滤的体验，优先用第二种方案。

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