400-9697-123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input点击</title>
<style>
#div1{
width: 400px;
height: 250px;
padding: 20px;
border: 1px solid grey;
text-align: center;
float: left;
}
#div2{
width: 400px;
height: 250px;
padding: 20px;
border: 1px solid grey;
text-align: center;
float: left;
}
.ipt{
width: 250px;
height: 35px;
border: 2px solid gainsboro;
border-radius: 10px;
}
#bt{
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: dodgerblue;
border-radius: 10px;
border: none;
color: white;
}
table{
width: 280px;
border: 1px solid grey;
}
table td{
background-color: powderblue;
height: 50px;
}
</style>
</head>
<body>
<div id="div1">
输入内容：<input type="text" id="ipt1" class="ipt"><br><br>
输入内容：<input type="text" id="ipt2" class="ipt"><br><br>
输入内容：<input type="text" id="ipt3" class="ipt"><br><br>
<button id="bt">提交</button>
</div>
<div id="div2">
<table id="tb">
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>
</div>
<script>
var ipt = document.getElementsByClassName('ipt');
var bt = document.getElementById('bt');
var tb = document.getElementById('tb');
bt.onmouseup=function () {
var tr1 = document.createElement('tr');
for(let i=0;i<ipt.length;i++){
var text = ipt[i].value;
var tdd = document.createElement('td');
tdd.innerHTML=ipt[i].value;
tr1.appendChild(tdd);
tb.appendChild(tr1);
}
for(var k=0;k<ipt.length;k++)
ipt[k].value = '';
}
</script>
</body>
</html>
