<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
<style>
table{
width: 700px;
height: auto;
border: 1px solid #000;
margin-top: 10px;
border-spacing: 0;
border-collapse: collapse
}
th,td{
border: 1px solid #000;
text-align: center
}
</style>
</head>
<body>
<form>
姓名: <input type="text">
年龄: <input type="text">
性别: <input type="text">
<!-- 提交的时候内容可以添加进去 但是页面会刷新:不要使用button按钮(阻止默认行为) -->
<input type="button" value="提交">
</form>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 添加的内容就写在tbody中就可以了 -->
</tbody>
</table>
</body>
</html>
<script>
/*
点击添加表格
- 写好结构 绑定提交事件
- 获取到输入框中的value值
- 显示在表格中
*/
var username = document.querySelector('input:nth-child(1)')
var sex = document.querySelector('input:nth-child(2)')
var age = document.querySelector('input:nth-child(3)')
var btn = document.querySelector('input:nth-child(4)')
var tbody = document.querySelector('tbody')
btn.onclick = function(){
// 创建td 创建tr 需要把td插入到tr tr再插入到tbody中
var tr = document.createElement('tr')
var td = document.createElement('td')
// 获取用户输入的value值 dom元素.value
var _username = username.value
// 把获取到的值放在td中
td.innerHTML = _username
tr.appendChild(td)
var _sex = sex.value
var td = document.createElement('td')
// 把获取到的值放在td中
td.innerHTML = _sex
tr.appendChild(td)
var _age = age.value
var td = document.createElement('td')
// 把获取到的值放在td中
td.innerHTML = _age
tr.appendChild(td)
// 新增一个删除按钮
var td = document.createElement('td')
td.innerHTML = '删除'
tr.appendChild(td)
// 利用事件委托 给td的父级tr绑定事件
tr.onclick = function(e){
var e = e || window.event
console.log(e.target) // 精准源已经拿到了
if(e.target.nodeName == "TD" && e.srcElement.innerHTML == '删除'){ // 兼容写法
// 你现在的事件源是td 点击的是tr 删除tr 父级.removeChild(子级)
tbody.removeChild(e.target.parentNode)
}
}
tbody.appendChild(tr)
// 在所有的数据添加之后 需要把上次的内容给清空掉
username.value = ""
sex.value = ""
age.value = ""
}
</script>
原创文章，作者：sunnyman218，如若转载，请注明出处：https://blog.ytso.com/245184.html