为啥我一点删除删除就删除好几个呢,我只想删除一个(我承认我的代码不咋地,我是新手谢谢了)

维护员菜gou一枚 2023-10-11 20:36:45

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
    </style>
</head>
<body>

    <!-- 一。定义body里的元素,form》input   -->



    <!-- 定义form里的class为info -->
      <form autocomplete="off" class="info">
    <!-- 定义input的class,方便接下来的调用 -->
    <input type="text" placeholder="姓名" class="uname">
    <input type="text" placeholder="年龄" class="uage">
    <input type="text" placeholder="薪资" class="usalary">
    <!-- 定义select的class,方便接下来的调用 -->
        <select name="usex" id="" class="usex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <select name="ucity" id="" class="ucity">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
        </select>
        <!-- 定义按钮,方便接下来添加arr -->
        <button class="add" type="">添加</button>
      </form>
    <table>
        <thead>
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>薪资</td>
                <td>就业城市</td>
               
            </tr>
        </thead>
        <tbody>
         
        </tbody>
    </table>
    <script>
        /* 选择body中的一些元素 */
        let tbody=document.querySelector("tbody");
        let arr=[];
        
        
        let info=document.querySelector(".info");
        
        let uname=document.querySelector(".uname");
        let uage=document.querySelector(".uage");
        let usalary=document.querySelector(".usalary");
        let usex=document.querySelector(".usex");
        
        let ucity=document.querySelector(".ucity");
        /* 定义全局变量,存储本地数据和读取本地数据。 */
        let setlocalstorage;
        let getlocalstorage;
        /* 监听form 和子元素input ,监控项为submit*/
        info.addEventListener("submit",function(e){
            /* 阻止默认的跳转动作 */
            e.preventDefault();
            /* 不允许输入空元素 !这个需要调试,输入完了还是把空的内容添加到了arr里 */
            if(!uname.value || !uage.value || !usalary.value){
                alert(`no!`);
                /* 重置info里的表格。 */
                render();
                    this.reset();
                
            };
        
           
                
             /* 向arr数组添加元素 */
             arr.push({id:arr.length+1,name:uname.value,age:uage.value,sex:usex.value,salary:usalary.value,city:ucity.value});
            //  arr.pop();
            /* 将arr数组的内容存储到 本地,格式为字符串*/
             setlocalstorage=localStorage.setItem("arr",JSON.stringify(arr));
             /* 读取本地存储的arr,格式为对象 */
        getlocalstorage=JSON.parse(localStorage.getItem("arr"));
        /* 定义本地功能函数,将读取本地存储的内容,赋值给tbody的内容,让其形成表格。*/
        function render(){
 
let newArr=getlocalstorage.map(function(ele,index){
    return`<tr>
        <td>${ele.id}</td>
        <td>${ele.name}</td>
        <td>${ele.age}</td>
        <td>${ele.sex}</td>
        <td>${ele.salary}</td>
        <td>${ele.city}</td>
        <td><button class="add" type="submit" data-id="${index}">删除</button><td>
        

    </tr>`
})
 
tbody.innerHTML=newArr.join("");
 
}
/* 调用函数,否则函数不运行。 */
render();
/* 重置info项(输入项) */
        // this.reset();


        // tbody继承的调用 ,还是需要排查故障,因为点一个删两个·····
        tbody.addEventListener("click",function(e){
        
         if(e.target.tagName==="BUTTON"){
         
         console.log(e.target.dataset.id);
        arr.splice(e.target.dataset.id,1);
        // //  console.log(arr);
         localStorage.setItem("arr",JSON.stringify(arr)); 
         getlocalstorage=JSON.parse(localStorage.getItem("arr"));
     render(); 

         
         }
       
    
     
    })
        })
    
    
    
      
       
  
       
        
        
    
    
    
 
     
    </script>
</body>
</html>

 

...全文
5654 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
②⑤⑦②④⑧ 2023-10-12
  • 打赏
  • 举报
回复 1
试一下 把112行移到90行后面,再把135行移到render函数定义前
  • 举报
回复
@②⑤⑦②④⑧ 好了 ,感谢
  • 打赏
  • 举报
回复

我一点删除按钮,就删除好几个,可以多添加几行试试。比如我添加了3行,我点第一行就全删了,我只想删除一行。

  • 举报
回复
@维护员菜gou一枚 我想点哪个就删哪个比如说 为啥我点第一个就都删了 点第二个删除按钮就把二行后面的都删了

39,093

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧