<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/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");
td2Element.innerHTML="<input type='text' value='' required name='account' class='form-control'>";
td3Element.innerHTML="<input type='password' value='' required name='password' 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);
var tbody = document.getElementById("tb");
tbody.appendChild(trElement);
}
function delrow(obj){
btnTrElement = obj.parentNode.parentNode;
tbodyElemement = btnTrElement.parentNode;
tbodyElemement.removeChild(btnTrElement);
}
</script>
</head>
<body>
<form>
<table class="table table-responsive table-striped" id="table">
<tbody id="tb">
<tr>
<td></td>
<td><input type='text' value='' required name='account' class='form-control'></td>
<td><input type='password' value='' required name='password' 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>
</tfoot>
</table>
</form>
</body>
</html>
2day04
最新推荐文章于 2024-05-19 13:56:53 发布