如何根据行数隐藏购物车表格并切换显示空购物车表格

步骤1：修正删除按钮的点击事件 #

先给每个删除图标添加当前元素引用，让函数能精准定位要删除的行：

<!-- 将原 onclick="urunsilme()" 修改为 -->
<i style="cursor:pointer;" class="fa-solid fa-trash-can" onclick="urunsilme(this)"></i>

步骤2：编写JavaScript逻辑 #

添加以下脚本，实现删除行+表格切换功能：

// 页面加载完成后初始化表格状态
document.addEventListener('DOMContentLoaded', function() {
  toggleCartTables();
});

// 删除商品行函数
function urunsilme(deleteBtn) {
  // 定位当前按钮所在的商品行
  const productRow = deleteBtn.closest('tr');
  // 只删除商品行，跳过表头和总计行
  if (productRow && !productRow.classList.contains('toplam') && productRow.querySelector('th') === null) {
    productRow.remove();
    // 删除后检查表格状态并切换
    toggleCartTables();
  }
}

// 切换购物车表格显示状态
function toggleCartTables() {
  const sepetTablo = document.getElementById('sepettablo');
  const sepetBos = document.querySelector('.sepetbos');
  // 获取表格总行数（包含表头、商品行、总计行）
  const totalRows = sepetTablo.querySelectorAll('tr').length;
  
  // 当只剩表头和总计行时，判定购物车为空
  if (totalRows <= 2) {
    sepetTablo.style.display = 'none';
    sepetBos.style.display = 'table';
  } else {
    sepetTablo.style.display = 'table';
    sepetBos.style.display = 'none';
  }
}

步骤3：设置初始CSS状态 #

确保空购物车表格默认隐藏：

.sepetbos {
  display: none;
}

逻辑说明 #

• 删除函数通过closest('tr')定位目标行，同时通过类名和标签判断，避免误删表头或总计行。
• toggleCartTables函数通过统计总行数判断购物车状态：当行数≤2（仅表头+总计行）时，切换到空购物车视图；否则显示商品表格。
• 页面加载时自动初始化状态，确保初始无商品时直接显示空购物车提示。

内容的提问来源于stack exchange，提问作者Batuğ Can Akpınar