js添加tr

最新推荐文章于 2023-08-02 15:40:58 发布

Qian_v1

最新推荐文章于 2023-08-02 15:40:58 发布

阅读量758

点赞数

分类专栏： js练习文章标签：前端

本文链接：https://blog.csdn.net/Qian_v1/article/details/126682594

版权

js练习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了一个前端开发者信息管理系统，包括姓名、年龄、性别、薪资和就业城市的选择输入，以及数据的录入与展示。用户可以录入新员工信息并实时更新就业榜，展示了HTML、CSS和JavaScript等前端技术的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <link href="css/qqstyle.css" rel="stylesheet" type="text/css" />
       <style>
           * {
               font-size: 14px;
               list-style: none;
               padding: 0;
               margin: 0;
           }

           img {
               width: 100px;
           }
       </style>
   </head>
   <body>
       <div class="info">
           姓名：<input type="text" class="uname" />
           年龄：<input type="text" class="age" />
           性别：<select name="gender" id="" class="gender">
               <option value="男">男</option>
               <option value="女">女</option>
           </select>

           薪资：<input type="text" class="salay" />
           就业城市：<select name="city" id="" class="city">
               <option value="北京">北京</option>
               <option value="上海">上海</option>
               <option value="杭州">杭州</option>
           </select>
           <button class="add">录入</button>
           <h2>就业榜</h2>
           <table border="1" Cellspacing="0" Cellpadding="0">
               <tr>
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>性别</th>
                   <th>薪资</th>
                   <th>就业城市</th>
                   <th>操作</th>
               </tr>
               <tbody class="tbaCont"></tbody>
           </table>
           <script>
               let arr = [{
                       stuId: "1001",
                       uname: "张楚岚",
                       age: "10",
                       gender: "男",
                       salay: "20000",
                       city: "上海"
                   },
                   {
                       stuId: "1002",
                       uname: "张楚岚",
                       age: "10",
                       gender: "男",
                       salay: "20000",
                       city: "上海"
                   }, {
                       stuId: "1003",
                       uname: "张楚岚",
                       age: "10",
                       gender: "男",
                       salay: "20000",
                       city: "上海"
                   }
               ]

               let tbaCont = document.querySelector('.tbaCont')
               let add=document.querySelector('.add')
               let uname=document.querySelector('.uname')
               let age=document.querySelector('.age')
               let gender=document.querySelector('.gender')
               let salay=document.querySelector('.salay')
               let city=document.querySelector('.city')
               arrData()

   function arrData() {
                    tbaCont.innerHTML = ""
                    for (let i = 0; i < arr.length; i++) {
                        
                        let tr = document.createElement('tr')
                        
                        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].city}</td>
                    <td><a href="#" id="${i}">删除</a></td>
                    `
                    let del=tr.querySelector('a')
                    del.addEventListener('click',function(){
                        tbaCont.removeChild(tr)
                    })
                    // tbaCont.appendChild(tr)
                    tbaCont.insertBefore(tr,tbaCont.children[0])
                    }
                }

// 2录入

 add.addEventListener('click',function(){
                    let obj={
                        stuId:+arr[arr.length-1].stuId+1,
                        uname:uname.value,
                        age:age.value,
                        gender:gender.value,
                        salay:salay.vaue,
                        city:city.value
                    }
                    arr.push(obj)
                    arrData()
                    uname.value=gender.value=salay.vaue=age.value=city.value=""
                })

// 删除利用事件属性

  tbaCont.addEventListener('click',function(e){
                    // debugger
                    if(e.target.tagName==='A'){
                        
                    arr.splice(e.target.id,1)
                    arrData()
                    }
                })

               // 删除2
               // 可以在添加元素的时候删除元素
               // let del=tr.querySelector('a')
               // del.addEventListener('click',function(){
               //    tbaCont.removeChild(tr)
               // })
           </script>
       </div>
   </body>
</html>