题目:动态创建的表格有删除功能，可以删除表格中的某一项
<!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{border-collapse:collapse;margin: 20px auto;}/*合并单元格之间的边框 */
#box tr{border: 1px solid black;height: 30px;}
#box td{border: 1px solid black;70px;text-align: center;}
input{ 100px;}
</style>
</head>
<body>
<!-- 输入框 -->
<input type="text" class="txt1">
<input type="text" class="txt2">
<input type="text" class="txt3">
<input type="button" id="btn" value="提交">
<!-- 表格 -->
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>操作</td>
</tr>
</thead>
<tbody class="box">
</tbody>
</table>
</body>
<script>
// 动态创建的表格有删除功能，可以删除表格中的某一项
//获取tbody
var oBox = document.querySelector(".box");
//获取输入框文本属性
var oTxt1 = document.querySelector(".txt1");
var oTxt2 = document.querySelector(".txt2");
var oTxt3 = document.querySelector(".txt3");
//获取提交按钮
var obtn = document.getElementById("btn");
obtn.onclick = function(){
//创建td
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
//设置td内容
td1.innerHTML = oTxt1.value;
td2.innerHTML = oTxt2.value;
td3.innerHTML = oTxt3.value;
td4.innerHTML = "删除";
//创建tr
var tr = document.createElement("tr");
//td插入tr
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
//插入tr
oBox.appendChild(tr);
//删除操作
td4.onclick = function(){
tr.remove();
}
}
</script>
</html>