如何将用户重定向回动态数据表的原行位置？

嘿，这个问题我太懂了——上千条数据的表格，编辑完滚回原来的行简直是折磨！锚点完全能解决你的问题，大概率是之前的实现没做对，我给你拆解几个靠谱的方案：

方案1：正确使用锚点（最直接的实现） #

锚点是最适配这个场景的方案，之前没成功应该是因为你没给表格行设置唯一的ID锚点，或者重定向时没带上锚点参数。

步骤1：给每行表格添加唯一ID #

修改你生成$product_list的代码，给<tr>标签加上以产品ID为标识的唯一ID：

$product_list .= "<tr id='product-row-$id'>
    <th>$prod_cat</th>
    <th>$sub_cat</th>
    <th>$prod_name</th>
    <th>$price</th>
    <th>$q_left</th>
    <th>$id1</th>
    <th>£$package</th>
    <th>
        <a href='dragNdrop.php?pID=$id'>Add more images</a> &nbsp;/&nbsp;
        <a href='editProduct.php?pID=$id'>Edit</a>&nbsp;/&nbsp;
        <a href='index.php?delID=$id&prodName=$prod_name'>Delete</a>
    </th>
</tr>";

这里的id='product-row-$id'会给每行生成类似product-row-570的唯一锚点。

步骤2：编辑完成后重定向带锚点 #

在editProduct.php里处理完编辑逻辑后，重定向回数据表页面时，要在URL末尾加上锚点：

// 假设你从URL参数拿到产品ID
$productId = $_GET['pID'];
// 处理编辑逻辑...
// 重定向回数据表页面，带上锚点
header("Location: your-data-table-page.php#product-row-$productId");
exit;

（把your-data-table-page.php换成你实际的数据表页面文件名）

可选：用JS增强滚动体验 #

有时候页面加载慢可能导致锚点滚动不生效，或者想让滚动更平滑，可以加一段JS：

window.addEventListener('load', function() {
    const targetRow = document.querySelector(window.location.hash);
    if (targetRow) {
        // 平滑滚动到目标行，并且让行居中显示
        targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
        // 给目标行加个高亮，方便用户快速找到
        targetRow.style.backgroundColor = '#f0f9ff';
        setTimeout(() => {
            targetRow.style.backgroundColor = '';
        }, 3000);
    }
});

方案2：URL参数+JS定位（无锚点URL） #

如果你不想URL里出现#锚点，可以用URL参数传递产品ID，再通过JS定位：

步骤1：编辑完成后重定向带参数 #

$productId = $_GET['pID'];
// 处理编辑逻辑...
header("Location: your-data-table-page.php?focusId=$productId");
exit;

步骤2：页面加载时JS定位 #

window.addEventListener('load', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const focusId = urlParams.get('focusId');
    if (focusId) {
        const targetRow = document.getElementById(`product-row-${focusId}`);
        if (targetRow) {
            targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
            targetRow.style.backgroundColor = '#f0f9ff';
            setTimeout(() => targetRow.style.backgroundColor = '', 3000);
        }
    }
});

这个方案和锚点效果一致，但URL会更“干净”。

方案3：本地存储辅助定位（适合复杂场景） #

如果你的页面有更多交互（比如筛选、分页），可以用localStorage存储用户编辑的行ID，页面加载时再读取定位：

步骤1：点击编辑链接时存储行ID #

给编辑链接加点击事件，存储当前行的ID：

document.querySelectorAll('a[href*="editProduct.php"]').forEach(link => {
    link.addEventListener('click', function() {
        const targetRow = this.closest('tr');
        if (targetRow) {
            localStorage.setItem('lastEditedRowId', targetRow.id);
        }
    });
});

步骤2：页面加载时读取并定位 #

window.addEventListener('load', function() {
    const rowId = localStorage.getItem('lastEditedRowId');
    if (rowId) {
        const targetRow = document.getElementById(rowId);
        if (targetRow) {
            targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
            targetRow.style.backgroundColor = '#f0f9ff';
            setTimeout(() => targetRow.style.backgroundColor = '', 3000);
        }
        // 用完就删除，避免下次打开页面还定位到该行
        localStorage.removeItem('lastEditedRowId');
    }
});

总结 #

锚点完全适用于数据表行定位，是最直接的方案，只要给每行设置唯一ID并在重定向时带上锚点就能解决问题。另外两种方案可以根据你的URL习惯和页面复杂度选择，核心都是定位到目标行并滚动到视野内，再配合高亮提示能大幅提升用户体验。

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