HTML 表格中非法嵌套表单元素导致内容溢出问题解析

✅ 推荐修复方案（行内编辑 + 合法 DOM 结构）

    0) {           while ($row = $result->fetch_assoc()) {             $id = htmlspecialchars($row["category_id"]);             $catname = htmlspecialchars($row["category_name"]);       ?>       <tr data-category-id="">         ";         }       ?>     
     
       
         
Category ID
         
Category Name
         
Action
       
     
     
       
         
         
                                                       
       
       
No Categories in Database
   
 
   
   
     ×     
Edit Category
                   Enter new name:              Save Changes        
 

✅ 对应 JS（解耦逻辑，提升可维护性）

// 打开编辑模态框 document.querySelectorAll('.edit-btn').forEach(btn => {   btn.addEventListener('click', function() {     const row = this.closest('tr');     const id = row.dataset.categoryId;     const name = this.dataset.name;      document.getElementById('edit-id').value = id;     document.getElementById('edit-name').value = name;     document.getElementById('edit-modal').style.display = 'block';   }); });  // 关闭模态框 document.querySelector('.close').addEventListener('click', () => {   document.getElementById('edit-modal').style.display = 'none'; });  // 点击空白处关闭 window.addEventListener('click', (e) => {   const modal = document.getElementById('edit-modal');   if (e.target === modal) modal.style.display = 'none'; });

✅ 必须遵守的关键原则

• ❌ 禁止在
  、
  、、
  中直接写
  、
  、、