学生信息登记表单的录入删除代码JS+HTML TOMCAT听课笔记 

<!DOCTYPE html>
<html>
    <head>
       
    </head>
 <body>
   
    <form class="info" autocomplete="off">
        姓名:<input type="text" class="uname" name="uname">
        年龄<input type="text" class="age" name="age">
        性别：<select name="gender" class="gender">
                <option value="男">男</option>
                <option value="女">女</option>
        </select>
        薪资<input type="text" class="salary" name="salary"/>
        就业城市<select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>
        <button class="add">录入</button>
    </form>
   <h1>就业榜</h1>
   <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="tbody">

        </tbody>
   </table>
</body>
</html>
   <script>
        const uname=document.querySelector('.uname');
        const age=document.querySelector('.age');
        const gender=document.querySelector('.gender');
        const salary=document.querySelector('.salary');
        const city=document.querySelector('.city');
        const tbody=document.querySelector('tbody');
        const items=document.querySelectorAll("[name]");
       

       const arr=[];

       const info=document.querySelector('.info');
       info.addEventListener('submit',function(e){
            e.preventDefault();

            for(let i=0;i<items.length;i++){
                if(items[i].value===''){
                    return alert('内容不能为空');
                }
            }

           const obj={
                stuId:arr.length+1,
                uname:uname.value,
                age:age.value,
                gender:gender.value,
                salary:salary.value,
                city:city.value,


           };
           //console.log(obj);
           //追加给数组
           arr.push(obj);
           console.log(arr);
           //清空表单
           this.reset();
           //调用渲染函数
           render();//渲染 调用底下那个渲染函数啊
       });
       //渲染函数
       function render(){
            //遍历arr数组
           
            tbody.innerHTML='';//清空下tbody,
            for(let i=0;i<arr.length;i++){
                //生成tr
                const tr=document.createElement('tr'); //不懂这句放在for好 for里面好
                tr.innerHTML=`
                    <td>${arr[i].stuId}</td>
                    <td>${arr[i].uname}</td>
                    <td>${arr[i].age}</td>
                    <td>${arr[i].gender}</td>
                    <td>${arr[i].salary}</td>
                    <td>${arr[i].city}</td>
                    <td>
                        <a href="javascript:" data-id=${i}>删除</a>
                    </td>`
                //追加元素  父元素.appendChild
                tbody.appendChild(tr);
            }
          
       }
       //删除操作
       //事件委托
       tbody.addEventListener('click',function(e){
            if(e.target.tagName==='A'){
                console.log(e.target.dataset.id);
                arr.splice(e.target.dataset.id,1);
                console.log(arr);

                render();//重新渲染下

            }
       })
   </script>

 

posted @ 2023-08-27 19:56  斯斯20222  阅读(139)  评论(0)    收藏  举报