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

维护员菜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>

 

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

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

  • 举报
回复
@维护员菜gou一枚 我想点哪个就删哪个比如说 为啥我点第一个就都删了 点第二个删除按钮就把二行后面的都删了
资源下载链接为: https://pan.quark.cn/s/c705392404e8 在本项目中,我们聚焦于“天池-零基础入门数据挖掘-心跳信号分类预测-EDA分析全过程-代码.rar”这一主题。该压缩包涵盖了一次针对心跳信号分类预测的数据挖掘实践,涉及数据的初步探索性分析(Exploratory Data Analysis, EDA)以及相关代码。 “天池”通常指阿里巴巴天池大数据竞赛平台,这是一个提供各类数据竞赛的平台,旨在助力数据科学家和初学者提升技能并解决实际问题。此数据挖掘任务可能是一项竞赛项目,要求参赛者对心跳信号进行分类预测,例如用于诊断心脏疾病或监测健康状况。EDA是数据分析的关键环节,其目的是通过可视化和统计方法深入了解数据的特性、结构及潜在模式。项目中的“task2 EDA.ipynb”很可能是一个 Jupyter Notebook 文件,记录了使用 Python 编程语言(如 Pandas、Matplotlib 和 Seaborn 等库)进行数据探索的过程。EDA 主要包括以下内容:数据加载,利用 Pandas 读取数据集并检查基本信息,如行数、列数、缺失值和数据类型;描述性统计,计算数据的中心趋势(平均值、中位数)、分散度(方差、标准差)和分布形状;可视化,绘制直方图、散点图、箱线图等,直观呈现数据分布和关联性;特征工程,识别并处理异常值,创建新特征或对现有特征进行转换;相关性分析,计算特征之间的相关系数,挖掘潜在关联。 “example.html”可能是一个示例报告或结果展示,总结了 EDA 过程中的发现,以及初步模型结果,涵盖数据清洗、特征选择、模型训练和验证等环节。“datasets”文件夹则包含用于分析的心跳信号数据集,这类数据通常由多个时间序列组成,每个序列代表一个个体在一段时间内的 ECG 记录。分析时需了解 ECG 的生理背景,如波

39,117

社区成员

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

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