jQuery动态选择器：正确使用变量操作表格行（删除与替换）

let trClass = "foobar-26";
// 错误示例：这将尝试查找一个名为 "trClass" 的类，而不是变量 trClass 所存储的值
$(".trClass").remove();

let trClass = "foobar-26";
// 正确示例：使用字符串拼接
$('.' + trClass).remove(); // 选中 class 为 "foobar-26" 的元素并移除

let trClass = "foobar-26";
// 正确示例：使用模板字面量
$(`.${trClass}`).remove(); // 选中 class 为 "foobar-26" 的元素并移除

<tbody class="sellbook">
    <tr class="foobar-26">
        <td>价格</td>
        <td>数量</td>
        <td>总计</td>
    </tr>
    <tr class="foobar-27">
        <td>价格</td>
        <td>数量</td>
        <td>总计</td>
    </tr>
    <tr class="foobar-28">
        <td>价格</td>
        <td>数量</td>
        <td>总计</td>
    </tr>
</tbody>

// 模拟接收到的数据，用于更新操作
const eUpdate = {
    message: {
        id: 26,
        price: 100,
        amount: 5,
        total: 500
    }
};

// 模拟另一条数据，用于删除操作
const eRemove = {
    message: {
        id: 27,
        price: 0,
        amount: 0, // 数量为0时删除
        total: 0
    }
};

/**
 * 根据数据更新或删除表格行
 * @param {object} data - 包含 id, price, amount, total 的数据对象
 */
function updateOrRemoveTableRow(data) {
    // 构建新的行内容
    const newTrContent = `<td>${data.price}</td><td>${data.amount}</td><td>${data.total}</td>`;
    // 构建动态类名
    const trClass = `foobar-${data.id}`; 

    // 使用模板字面量构建jQuery选择器
    const $targetRow = $(`.${trClass}`);

    if (data.amount === 0) {
        // 如果数量为0，则移除该行
        if ($targetRow.length) { // 检查元素是否存在
            $targetRow.remove();
            console.log(`已移除类名为 ${trClass} 的表格行。`);
        } else {
            console.warn(`未找到类名为 ${trClass} 的表格行，无法移除。`);
        }
    } else {
        // 否则，更新该行的内容
        if ($targetRow.length) { // 检查元素是否存在
            $targetRow.html(newTrContent);
            console.log(`已更新类名为 ${trClass} 的表格行。`);
        } else {
            console.warn(`未找到类名为 ${trClass} 的表格行，无法更新。`);
            // 如果行不存在，也可以选择添加新行，例如：
            // $('.sellbook').append(`<tr class="${trClass}">${newTrContent}</tr>`);
        }
    }
}

// 调用函数进行操作
updateOrRemoveTableRow(eUpdate.message); // 示例：更新 foobar-26
updateOrRemoveTableRow(eRemove.message); // 示例：移除 foobar-27

// 尝试移除一个不存在的行，观察警告信息
updateOrRemoveTableRow({ id: 99, price: 0, amount: 0, total: 0 });