<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title></title>
<script>
function addrows() {
var trElement = document.createElement("tr");
var td1Element = document.createElement("td");
var td2Element = document.createElement("td");
var td3Element = document.createElement("td");
var td4Element = document.createElement("td");
var tbody = document.getElementById("tb");
td2Element.innerHTML="<input type='text' value='' class='form-control'>";
td3Element.innerHTML="<input type='password' value='' class='form-control'>";
td4Element.innerHTML="<input type='button' value='删除' class='btn btn-danger' onclick='delrow(this)'>";
trElement.appendChild(td1Element);
trElement.appendChild(td2Element);
trElement.appendChild(td3Element);
trElement.appendChild(td4Element);
tbody.appendChild(trElement);
}
function delrow(obj){
btnTrElement = obj.parentNode.parentNode;
tbodyElemement = btnTrElement.parentNode;
tbodyElemement.removeChild(btnTrElement);
}
</script>
</head>
<body>
<table class="table table-responsive table-striped" >
<tbody id="tb">
<tr>
<td></td>
<td><input type='text' value='' class='form-control'></td>
<td><input type='password' value='' class='form-control'></td>
<td><input type='button' value='删除' class='btn btn-danger' onclick='delrow(this)'></td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center" colspan="4">
<button class="btn btn-primary" onclick="addrows()">添加</button>
</td>
</tr>
</table>
</tfoot>
</body>
</html>
来源：https://blog.csdn.net/weixin_42303820/article/details/100899375