如图，我想要实现点击添加按钮之后将文本框里的内容添加到表格对应的td里面，现在已经实现了点击添加按钮生成空白的表格，请问怎么把上面文本框里的文字添加到这些空白的表格里
下面是我写的代码
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 60%;
margin: 20px auto;
text-align: center;
}
table {
width: 100%;
margin-top: 30px;
border-collapse: collapse;
}
table caption {
text-align: left;
margin-bottom: 10px;
}
table tr td,
table tr th {
border: 1px solid blue;
padding: 10px 0px;
text-align: center;
}
.small {
width: 60px;
}
</style>
</head>
<body>
<div>
<label>编号：<input type="text" id="txet1"></label>
<label>姓名：<input type="text" id="txet2"></label>
<label>住址：<input type="text" id="txet3"></label>
<button id="btn_add">添加</button>
<button id="btn_update">更新</button>
<table id="tbl">
<caption>
<input type="checkbox" id="all"> 选择所有
<button id="btn_del" style="margin-left: 30px;"> 删除选中项</button>
<input type="text" id="search" placeholder="输入编号筛选查询" style="margin-left: 30px;">
</caption>
<thead id="thead">
<tr>
<th> 选择</th>
<th> 编号</th>
<th> 姓名</th>
<th> 住址</th>
<th colspan="2"> 操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<script>
var btn_add = document.getElementById('btn_add');//获取添加按钮
var text = document.querySelectorAll("input");
btn_add.onclick = function () {
//创建tr行元素
var tr = document.createElement('tr');
var tbody = document.querySelector('tbody');
tbody.appendChild(tr);
for (var i = 0; i < 6; i++) {
//创建td块元素
var td = document.createElement('td');
tr.appendChild(td);
}
}
</script>
</body>
</html>
