- it技术
- 使用HTML、css、JavaScript写增删改查
使用HTML、css、JavaScript写增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格
</title>
<style>
div {
width: 800px;
height: 500px;
text-align: center;
position: absolute;
border: 3px solid black;
}
</style>
</head>
<body>
<div>
<table border="1px solid" align="center" cellspacing=0 cellpadding=0>
<tr>
<td>用户名
</td>
<td><input type="text" id="yonghu" name="yonghu"></td>
</tr>
<tr>
<td>昵称
</td>
<td><input type="text" id="nicheng" name="nicheng"></td>
</tr>
<tr>
<td>重置
</td>
<td>
<input type="button" value="保存" id="bchgx">
</td>
</tr>
</table>
<hr>
用户名:
<input type="text" id="searchKey">
<input type="button" value="搜索" id="search">
<hr>
<input id="dxk" type="button" value="全选" name="dxk">
<input id="qxdxk" type="button" value="取消全选" name="qxdxk">
<input id="fx" type="button" value="反选" name="fx">
<input id="plsc" type="button" value="批量删除" name="plsc">
<hr>
<table border="1px solid" align="center" cellspacing=0 cellpadding=0 width="80%">
<tbody>
<tr>
<td>选择
</td>
<td>序号
</td>
<td>用户名
</td>
<td>昵称
</td>
<td>操作
</td>
</tr>
<tr>
<td><input type="checkbox" name="dxk"></td>
<td>1
</td>
<td>aaa
</td>
<td>aaa
</td>
<td>
<input type="submit" value="删除" onclick="del(this)">
<input type="submit" value="更新" class="update">
</td>
</tr>
<tr>
<td><input type="checkbox" name="dxk"></td>
<td>2
</td>
<td>bbb
</td>
<td>bbb
</td>
<td>
<input type="submit" value="删除" onclick="del(this)">
<input type="submit" value="更新" class="update">
</td>
</tr>
<tr>
<td><input type="checkbox" name="dxk"></td>
<td>3
</td>
<td>ccc
</td>
<td>ccc
</td>
<td>
<input type="button" value="删除" onclick="del(this)">
<input type="button" value="更新" class="update">
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
window.onload = function () {
document.getElementById('bchgx').onclick = function () {
var yonghu1 = document.getElementsByName('yonghu')[0];
var yonghu = yonghu1.value;
var nicheng1 = document.getElementsByName('nicheng')[0];
var nicheng = nicheng1.value;
var table = document.getElementsByTagName('table')[1]
var tbody = document.getElementsByTagName('tbody')[1];
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var input = document.createElement('input');
input.setAttribute("type", "checkbox");
input.setAttribute("name", "dxk");
td1.appendChild(input);
tr.appendChild(td1);
var td2 = document.createElement('td');
var alltrsOftable = table.getElementsByTagName('tr');
var lastXH = parseInt(alltrsOftable[alltrsOftable.length - 1].children[1].innerHTML);
td2.innerHTML = lastXH + 1;
tr.appendChild(td2);
var td3 = document.createElement('td');
td3.innerHTML = yonghu;
tr.appendChild(td3);
var td4 = document.createElement('td');
td4.innerHTML = nicheng;
tr.appendChild(td4);
var td5 = document.createElement('td');
td5.innerHTML = "<input type=\"button\" value=\"删除\" οnclick=\"del(this)\"> <input type=\"button\" value=\"更新\" class=\"update\">";
tr.appendChild(td5);
tbody.appendChild(tr);
}
}
document.getElementById('search').onclick = function () {
var searchKey = document.getElementById('searchKey').value;
var trs = document.getElementsByTagName('table')[1].getElementsByTagName('tr');
for (var i = trs.length - 1; i > 0; i--) {
if (trs[i].children[2].innerHTML.indexOf(searchKey) == -1) {
trs[i].parentNode.removeChild(trs[i]);
}
}
}
document.getElementById('dxk').onclick = function () {
var xz = document.getElementsByName('dxk');
for (var i = 0; i < xz.length; i++) {
xz[i].checked = true;
}
};
document.getElementById('qxdxk').onclick = function () {
var qxxz = document.getElementsByName('dxk');
for (var i = 0; i < qxxz.length; i++) {
qxxz[i].checked = false;
}
};
document.getElementById('fx').onclick = function () {
var fx = document.getElementsByName('dxk');
for (var i = 0; i < fx.length; i++) {
fx[i].checked = !fx[i].checked;
}
}
document.getElementById('plsc').onclick = function () {
var inputs = document.getElementsByTagName('table')[1].getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].getAttribute('type') == "checkbox" && inputs[i].checked) {
document.getElementsByTagName('table')[1].getElementsByTagName('tbody')[0].removeChild(inputs[i].parentNode.parentNode);
i = -1;
}
}
};
function del(obj) {
var table = obj.parentNode.parentNode.parentNode;
table.removeChild(obj.parentNode.parentNode);
}
var updatestr = document.getElementsByClassName('update');
for (var i = 0; i < updatestr.length; i++) {
var update1 = updatestr[i];
update1.onclick = enterupdate;
}
var yuanxuhao = -1;
function enterupdate() {
console.log(this);
yuanxuhao = this.parentNode.parentNode.children[1].innerHTML;
var yonghu = this.parentNode.parentNode.children[2].innerHTML;
var nicheng = this.parentNode.parentNode.children[3].innerHTML;
document.getElementsByName("yonghu")[0].value = yonghu;
document.getElementsByName("nicheng")[0].value = nicheng;
document.getElementById("bchgx").value = "更新";
document.getElementById('bchgx').onclick = update;
}
function update() {
var yonghu1 = document.getElementsByName('yonghu')[0];
var yonghu = yonghu1.value;
var nicheng1 = document.getElementsByName('nicheng')[0];
var nicheng = nicheng1.value;
var trs = document.getElementsByTagName('table')[1].getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
var count = trs[i].children[1].innerHTML;
if (count == yuanxuhao) {
trs[i].children[2].innerHTML = yonghu;
trs[i].children[3].innerHTML = nicheng;
break;
}
}
}
document.getElementsByName('yonghu')[0].value = "";
document.getElementsByName('nicheng')[0].value = "";
document.getElementById('bchgx').value = "保存";
document.getElementById('bchgx').onclick = bchgx;
</script>
</html>
内容不全
