1.createElement()方法，用于创建标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
table{
border-collapse: collapse;
}
td,th{
border: 1px solid #ccc;
padding: 5px 10px;
}
</style>
</head>
<body>
<script>
// 创建一个table对象
let table = document.createElement('table')
// 创建一个tr对象
let tr = document.createElement('tr')
// 创建五个th对象
let th1 = document.createElement('th')
// 在th1里面添加内容
th1.innerHTML = '学号'
let th2 = document.createElement('th')
th2.innerHTML = '姓名'
let th3 = document.createElement('th')
th3.innerHTML = '年龄'
let th4 = document.createElement('th')
th4.innerHTML = '性别'
let th5 = document.createElement('th')
th5.innerHTML = '操作'
// 将五个th添加到tr中
tr.appendChild(th1)
tr.appendChild(th2)
tr.appendChild(th3)
tr.appendChild(th4)
tr.appendChild(th5)
// 将tr添加到table中
table.appendChild(tr)
// 将table表格添加到body中
document.body.appendChild(table)
</script>
</body>
</html>2.删除有两种方式：方式一：自删。方式是：自己.remove()。方式二：通过父级删除自己。方式是：父级标签.removeChild(自己)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
table{
border-collapse: collapse;
}
td,th{
border: 1px solid #ccc;
padding: 5px 10px;
}
</style>
</head>
<body>
<script>
// 创建一个table对象
let table = document.createElement('table')
// 创建一个tr对象
let tr = document.createElement('tr')
// 创建五个th对象
let th1 = document.createElement('th')
// 在th1里面添加内容
th1.innerHTML = '学号'
let th2 = document.createElement('th')
th2.innerHTML = '姓名'
let th3 = document.createElement('th')
th3.innerHTML = '年龄'
let th4 = document.createElement('th')
th4.innerHTML = '性别'
let th5 = document.createElement('th')
th5.innerHTML = '操作'
// 将五个th添加到tr中
tr.appendChild(th1)
tr.appendChild(th2)
tr.appendChild(th3)
tr.appendChild(th4)
tr.appendChild(th5)
// 将tr添加到table中
table.appendChild(tr)
// 定义一个学生数组
let stus = [{
no:'1001',
name:'张三',
age:20,
gender:'男'
},{
no:'1002',
name:'李四',
age:22,
gender:'女'
},{
no:'1003',
name:'王五',
age:24,
gender:'男'
},{
no:'1004',
name:'赵六',
age:26,
gender:'女'
}]
// 循环数组，给数组中的每条数据，添加一个tr，并显示对应的数据
stus.forEach(s=>{
// 创建一个tr
let tr = document.createElement('tr')
// 创建五个td
let td1 = document.createElement('td')
td1.innerHTML = s.no
let td2 = document.createElement('td')
td2.innerHTML = s.name
let td3 = document.createElement('td')
td3.innerHTML = s.age
let td4 = document.createElement('td')
td4.innerHTML = s.gender
let td5 = document.createElement('td')
td5.innerHTML = '删除'
// 给td5注册点击事件
td5.onclick = function(){
if(confirm('确定删除吗？')){
// 删除当前行
table.removeChild(tr)
}
}
// 将五个td添加到tr中
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tr.appendChild(td5)
// 将tr添加到table中
table.appendChild(tr)
})
// 将table表格添加到body中
document.body.appendChild(table)
</script>
</body>
</html>