2021-01-20

1.js表格添加删除的写法

	<script type="text/javascript">
		// 1.选表单,绑提交事件
		document.stu.onsubmit = function(e){
			
			// 2.获取表单中的信息
			var sname = document.stu.sname.value
			var sex   = document.stu.sex.value
			var age   = document.stu.age.value
			var home  = document.stu.home.value

			// 3.创建一个tr节点
			var nodeTr = document.createElement('tr')
			nodeTr.innerHTML = `
				<td>${sname}</td>
				<td>${sex}</td>
				<td>${age}</td>
				<td>${home}</td>
				<td><button>删除</button></td>
				`
			
			// 4.选中表格第一行标题.在它后面插入
			var tblHead = document.querySelector('table > tbody > tr')
			tblHead.after( nodeTr )

			// 阻止默认行为.就是不让它跳转
			e.preventDefault()
			return false
		}


		// 5.绑整个表格绑定一个单击事件
		var tbl = document.querySelector('table')
		tbl.onclick = function(e){
			// 如果单击的真正目标是 button 按钮
			if (e.target.localName == 'button') {
				// '删除'这个按钮的父节点的父节点 删除
				e.target.parentNode.parentNode.remove()
			}
		}
	</script>