广东建设网 工程信息网站,可以做推广东西的网站,公司注册资金最新规定,上海殷行建设网站目录
一、功能说明
二、核心思想
三、所用知识回顾
四、基本框架
五、js功能实现部分 一、功能说明
#xff08;1#xff09;输入对应的信息#xff0c;点击录入可以为下面的表格添加一条记录#xff0c;注意当所填信息不完整时不允许进行提交。
#xff08;2…目录
一、功能说明
二、核心思想
三、所用知识回顾
四、基本框架
五、js功能实现部分 一、功能说明
1输入对应的信息点击录入可以为下面的表格添加一条记录注意当所填信息不完整时不允许进行提交。
2当点击删除记录的时候对应的数据会从表中进行删除
二、核心思想
采取减少dom的操作操作数据的形式删除增加都是针对于数组
1声明一个空的数组
2点击录入根据相关数据生成都西昂追加到数组中
3根据数组数据渲染页面-表格中的行
4点击删除按钮删除数组中的对应数据
5再次根据数组中的数据渲染页面
三、所用知识回顾
1阻止事件的默认行为 e.preventDefault()
2给数组增加元素 数组名.push(数据对象)
3从数组中删除数据 数组名.splice(从哪开始删删几个)
4如何知道当前点击的是什么标签 e.target.tagName
5如何定义自定义属性 在标签中加入data-id什么 用e.target.dataset.id获取自定义属性的id值
6如何创建结点 document.createElement‘元素名’
7如何给父元素追加结点 父元素.appendChild(要插入的元素)其为后插 父元素.insertBefore(要插入的元素)其为前插
8如何将内容渲染到标签中用反引号
四、基本框架 HTML部分
bodyh1新增学员/h1form classinfo autocompleteoff姓名input typetext classuname nameuname /年龄input typetext classage nameage /性别:select namegender classgenderoption value男男/optionoption value女女/option/select薪资input typetext classsalary namesalary /就业城市select namecity classcityoption value北京北京/optionoption value上海上海/optionoption value广州广州/optionoption value深圳深圳/optionoption value曹县曹县/option/selectbutton classadd录入/button/formh1就业榜/h1tabletheadtrth学号/thth姓名/thth年龄/thth性别/thth薪资/thth就业城市/thth操作/th/tr/theadtbody!-- trtd1001/tdtd欧阳霸天/tdtd19/tdtd男/tdtd15000/tdtd上海/tdtda hrefjavascript:删除/a/td/tr --/tbody/table
/body
CSS部分
* {margin: 0;padding: 0;
}a {text-decoration: none;color:#721c24;
}
h1 {text-align: center;color:#333;margin: 20px 0;}
table {margin:0 auto;width: 800px;border-collapse: collapse;color:#004085;
}
th {padding: 10px;background: #cfe5ff;font-size: 20px;font-weight: 400;
}
td,th {border:1px solid #b8daff;
}
td {padding:10px;color:#666;text-align: center;font-size: 16px;
}
tbody tr {background: #fff;
}
tbody tr:hover {background: #e1ecf8;
}
.info {width: 900px;margin: 50px auto;text-align: center;
}
.info input, .info select {width: 80px;height: 27px;outline: none;border-radius: 5px;border:1px solid #b8daff;padding-left: 5px;box-sizing: border-box;margin-right: 15px;
}
.info button {width: 60px;height: 27px;background-color: #004085;outline: none;border: 0;color: #fff;cursor: pointer;border-radius: 5px;
}
.info .age {width: 50px;
}
五、js功能实现部分 script// 获取表单中的元素 const unamedocument.querySelector(.uname)const agedocument.querySelector(.age)const genderdocument.querySelector(.gender)const salarydocument.querySelector(.salary)const citydocument.querySelector(.city)const tbodydocument.querySelector(tbody)// 获取所有带有name属性的标签const itemsdocument.querySelectorAll([name])// 声明一个数组const arr[]// 获取表单对象const infodocument.querySelector(.info)// 监听表单提交事件info.addEventListener(submit,function(e){// 阻止表单的默认行为e.preventDefault()// 进行表单的验证,不过不通过直接中断,//方法,利用除了提交都有一个name属性,可以获取name,for循环如果有空则return结束 循环for(let i0;iitems.length;i){if(items[i].value){return}}// 创建对象相当于每个学生const obj{stuId:arr.length1,uname:uname.value,age:age.value,gender:gender.value,salary:salary.value,city:city.value}// 将对象追加给数组arr.push(obj)// console.log(arr)// 提交后清空表单this.reset()// // 调用渲染函数render()})// 渲染函数因为删除和增加都需要渲染function render(){// 如果这样写则每次都会把所有的arr中的数据在原来的基础上又重新加了一次//则应该每次渲染前把tbody清空tbody.innerHTMLfor(let i0;iarr.length;i){// 每次渲染是多了行则需要先创建 trconst trdocument.createElement(tr)tr.innerHTMLtd${arr[i].stuId}/tdtd${arr[i].uname}/tdtd${arr[i].age}/tdtd${arr[i].gender}/tdtd${arr[i].salary}/tdtd${arr[i].city}/tdtda hrefjavascript: data-id${i}删除/a/td// 将tr追加到父元素tbody中tbody.appendChild(tr)}}// 进行删除操作
//删除在a里面但是有多个删除每个都绑定事件麻烦可以委托给父级元素唯一可以表示的有tbody
//但是只有点击a的时候才会删除所有需要if再判断一下点击的哪一个
tbody.addEventListener(click,function(e){if(e.target.tagNameA){// 如何知道当前想要删除的是哪条数据可以用自定义属性在生成a时// console.log(e.target.dataset.id)// 删除数组中对应的数据arr.splice(e.target.dataset.id,1)// 数组中元素少了则重新 渲染render()}
})/script
