数据插入表格(初级)

由于刚接触数组与对象的处理方法,所以这里采用的添加与删除的原理是,对原对象数组进行处理,再生成新的对象数组传入表格
链接: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()	
	}

}