由于刚接触数组与对象的处理方法,所以这里采用的添加与删除的原理是,对原对象数组进行处理,再生成新的对象数组传入表格
链接:demo
放点核心代码:
这里使用拼接字符串的方式
var tbody = document.querySelector("tbody")
setTable()
function setTable(){
var str=""
var i = 0
arr.forEach(function(item,index){
str +="<tr>"
for(var key in item){
str += "<td>" +item[key] +"</td>"
}
str +="<td class = 'del' index = '"+i+"'>删除</td>"
i++
str +="</tr>"
console.log(i)
})
tbody.innerHTML = str
add()
blind()
}
这里获取的.del为一个伪数组,遍历之后给每个删除的td写一个点击函数,获取当前index值并删除自己这一行(从原数组中删除),之后重新执行创建函数
function blind(){
var dels = document.querySelectorAll(".del")
for(var i = 0; i< dels.length; i++){
dels[i].onclick = function(){
var index = this.getAttribute("index")-0
arr.splice(index,1)
setTable()
}
}
}
这个是添加函数,当按钮点下的时候获取input中的信息,将信息push到原数组中,再重新创建表格
function add(){
var submit = document.querySelector("button")
submit.onclick = function(){
var message = {}
var info = document.querySelectorAll("input")
for(var i =0; i<info.length; i++){
message[info[i].name]=info[i].value
}
arr.push(message)
console.log(arr)
setTable()
}
}