如何通过 JavaScript 正确实现按钮点击显示/隐藏表格

✅ 正确做法：用 addEventListener + event.preventDefault() + CSS 类控制

相比直接赋值 onclick，现代推荐使用 addEventListener，它更灵活、可复用，且便于阻止默认行为。核心改进点有三：

1. 阻止默认行为：调用 evt.preventDefault() 消除按钮可能引发的表单提交；
2. 避免内联样式硬编码：改用 CSS 类（如 .hide）管理显示状态，语义清晰、易于维护；
3. 使用 classList.toggle()：一行代码完成“显示 ⇄ 隐藏”切换，无需手动判断 display 值。

✅ 推荐实现代码

<!-- HTML 结构（注意：确保按钮不在 form 中，或显式设置 type="button"） --> <button id="BtnNextInsured" type="button" class="btn btn-md btn-primary">Next</button>  <table id="tblContact" class="table table-light table-borderless hide">   <tr>     <td class="cellContent">       <input id="txtEmail" class="txt" placeholder="Email" />     </td>     <td class="cellContent">       <input id="txtCell" class="txt" placeholder="Cell Phone" />     </td>     <td class="cellContent">       <input id="txtLandline" class="txt" placeholder="Landline" />     </td>   </tr>   <tr>     <td colspan="3" style="text-align: right">       <button id="BtnNextContact" type="button" class="btn btn-md btn-primary">Next</button>     </td>   </tr> </table>

/* CSS：定义隐藏样式 */ .hide {   display: none; }

// javascript：安全绑定事件并控制显隐 document.addEventListener('DOMContentLoaded', () => {   const toggleBtn = document.getElementById('BtnNextInsured');   const table = document.getElementById('tblContact');    toggleBtn.addEventListener('click', (evt) => {     evt.preventDefault(); // ✅ 关键：阻止默认行为（如表单提交）     table.classList.toggle('hide'); // ✅ 切换显示状态   }); });

⚠️ 注意事项与最佳实践

• 始终明确