国开电大 JavaScript程序设计 实训七：实现用户管理功能

国开电大JavaScript程序设计实训七：实现用户管理功能javascript//DOM元素constuserTableBody=document.getElementById('userTableBody');constaddUserBtn=document.getElementById('addUserBtn');constuserModal=document.getElementById('userModal');constmodalTitle=document.getElementById('modalTitle');constuserForm=document.getElementById('userForm');constuserIdInput=document.getElementById('userId');constuserNameInput=document.getElementById('userName');constuserPhoneInput=document.getElementById('userPhone');constcloseBtn=document.querySelector('.close-btn');constcancelBtn=document.getElementById('cancelBtn');constsearchInput=document.getElementById('searchInput');constsearchBtn=document.getElementById('searchBtn');//初始化应用functioninitApp(){initData();renderUserList();bindEvents();}//渲染用户列表functionrenderUserList(filteredUsers=null){constusersToRender=filteredUsers||getAllUsers();if(usersToRender.length===0){constemptyRow=document.createElement('tr');userTableBody.appendChild(emptyRow);return;}usersToRender.forEach(user=>{constrow=document.createElement('tr');<td>${user.id}</td><td>${}</td><td>${user.phone||'-'}</td><td><buttonclass="btnaction-btnedit-btn"data-id="${user.id}">编辑</button><buttonclass="btnaction-btndelete-btn"data-id="${user.id}">删除</button></td>`;userTableBody.appendChild(row);});}//打开模态框functionopenModal(title,user=null){modalTitle.textContent=title;if(user){//编辑模式：填充表单userIdInput.value=user.id;userNameInput.value=;userPhoneInput.value=user.phone||'';}else{//新增模式：重置表单userForm.reset();userIdInput.value='';}userModal.style.display='block';}//关闭模态框functioncloseModal(){userModal.style.display='none';userForm.reset();//可选：关闭时重置表单}//绑定所有事件监听器functionbindEvents(){//新增用户按钮点击addUserBtn.addEventListener('click',()=>{openModal('新增用户');});//关闭模态框按钮点击closeBtn.addEventListener('click',closeModal);cancelBtn.addEventListener('click',closeModal);//点击模态框外部关闭window.addEventListener('click',(event)=>{if(event.target===userModal){closeModal();}});//表单提交（新增或编辑）userForm.addEventListener('submit',(event)=>{event.preventDefault();//阻止默认提交行为constuserId=userIdInput.value;constuserData={name:userNameInput.value.trim(),phone:userPhoneInput.value.trim()||''};//简单表单验证if(!userD){alert('请输入姓名');return;}alert('请输入有效的邮箱地址');return;}if(userId){//编辑用户constupdatedUser={id:parseInt(userId),...userData};if(updateUser(updatedUser)){alert('用户更新成功！');}else{alert(