如何用jQuery根据状态条件隐藏表格中的Update按钮？

原代码的核心问题 #

1. 全局选择器错误：$(".update")会选中页面上所有带update类的按钮，循环到状态为Delivered的行时，会隐藏全部更新按钮；后续循环到其他行的show操作会被最后一次的hide覆盖，最终导致所有按钮都被隐藏。
2. 类名不统一：前两行的Update按钮没有添加update类，即使逻辑正确，也无法对这两行的按钮进行控制。

修正步骤 #

1. 统一Update按钮的类名

修改HTML，给所有Update按钮加上update类，确保选择器能匹配到所有目标按钮：

<table>
    <tr>
        <th>No</th>
        <th>Customer</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Status</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Customer 1</td>
        <td>5000</td>
        <td>100000</td>
        <td class="status-order">Order</td>
        <td>
        <a class="update btn btn-outline-primary">Update</a>
        <a class="btn btn-outline-danger">Delete</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Customer 2</td>
        <td>2000</td>
        <td>40000</td>
        <td class="status-order">Order</td>
        <td>
        <a class="update btn btn-outline-primary">Update</a>
        <a class="btn btn-outline-danger">Delete</a>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>Customer 3</td>
        <td>3000</td>
        <td>60000</td>
        <td class="status-order">Delivered</td>
        <td>
        <a class="update btn btn-outline-primary">Update</a>
        <a class="delete btn btn-outline-danger">Delete</a>
        </td>
    </tr>
</table>

2. 修正jQuery逻辑

使用DOM遍历方法，定位当前行内的Update按钮，避免全局操作：

$(".status-order").each(function() {
    const status = $(this).text().trim(); // 去除文本前后空格，避免干扰判断
    // 找到当前单元格所在的行，再定位该行内的Update按钮
    const updateBtn = $(this).closest("tr").find(".update");
    
    if (status === "Delivered") {
        updateBtn.hide();
    } else {
        updateBtn.show();
    }
});

关键逻辑说明 #

• $(this).closest("tr")：从当前的状态单元格向上查找最近的<tr>元素，精准锁定当前数据行。
• .find(".update")：在当前行内查找目标按钮，确保只操作该行的Update按钮。
• .text().trim()：清除状态文本前后的空格/换行，避免因HTML格式问题导致的判断错误。

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