使用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>
<!-- position="absolute" text-align="center" border="3px solid black" width="800px" height="500px" -->
<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>
<!-- bchgx:保存或更新 -->
<input type="button" value="保存" id="bchgx">
</td>
</tr>
</table>
<hr>
<!-- searchKey:搜索关键字 -->
用户名: <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>
<!-- zdxk：总多选框 -->
<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>
<!-- this指的是整个input元素 -->
<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 () {
// 将要输入的内容存储到yonghu和nicheng两个变量名中
var yonghu1 = document.getElementsByName('yonghu')[0];
// var yonghu1 = document.getElementById('yonghu');
var yonghu = yonghu1.value;
var nicheng1 = document.getElementsByName('nicheng')[0];
var nicheng = nicheng1.value;
// 选择往哪个table中tbody中添加tr
var table = document.getElementsByTagName('table')[1]
var tbody = document.getElementsByTagName('tbody')[1];
// 创建一个tr
var tr = document.createElement('tr');//相当于<tr></tr>
// 在创建一个td
var td1 = document.createElement('td');
// 在td中添加<input type="checkbox" name="dxk">
var input = document.createElement('input');
input.setAttribute("type", "checkbox");
input.setAttribute("name", "dxk");
// 将input追加到td中
td1.appendChild(input);
// 将td1追加到tr中
tr.appendChild(td1);
// 创建td2
var td2 = document.createElement('td');
// 定义table中的所有tr：alltrsOftable
var alltrsOftable = table.getElementsByTagName('tr');
// 获取表格中最后一个序号
// alltrsOftable[alltrsOftable.length-1].children[1].innerHTML:表示的是所有tr中，表格的行数-1.索引值为1的那一列子节点开始中的内容
var lastXH = parseInt(alltrsOftable[alltrsOftable.length - 1].children[1].innerHTML);//转换成数字类型，或者使用Number
// td2的值
td2.innerHTML = lastXH + 1;
// 将td2添加到tr中
tr.appendChild(td2);
// 创建第三列
var td3 = document.createElement('td');
// 将之前存储的yonghu添加到td3
td3.innerHTML = yonghu;
// 将td3添加到tr中
tr.appendChild(td3);
// 创建第四列
var td4 = document.createElement('td');
// 将之前存储的nicheng添加到td4
td4.innerHTML = nicheng;
// 将td4添加到tr中
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);
// 将tr添加到table中
tbody.appendChild(tr);
// console.log(yonghu);
// console.log(nicheng);
}
}
// 搜索
document.getElementById('search').onclick = function () {
var searchKey = document.getElementById('searchKey').value;
var trs = document.getElementsByTagName('table')[1].getElementsByTagName('tr');
// trs.length-1表示的是trs中tr除去第一行，防止越界将第一行去除掉
for (var i = trs.length - 1; i > 0; i--) {
// console.log(111);
// console.log( trs[i].children[2].innerHTML + " " + searchKey + " "+ (trs[i].children[2].innerHTML.indexOf(searchKey) == -1));
if (trs[i].children[2].innerHTML.indexOf(searchKey) == -1) {
trs[i].parentNode.removeChild(trs[i]);
}
}
}
// 全选
// dxk：多选框
document.getElementById('dxk').onclick = function () {
// console.log(111);
var xz = document.getElementsByName('dxk');
// console.log(xz);
for (var i = 0; i < xz.length; i++) {
xz[i].checked = true;
}
};
// 取消全选
// qxdxk：取消多选框
document.getElementById('qxdxk').onclick = function () {
var qxxz = document.getElementsByName('dxk');
for (var i = 0; i < qxxz.length; i++) {
qxxz[i].checked = false;
}
};
// 反选
// fx：反选
document.getElementById('fx').onclick = function () {
var fx = document.getElementsByName('dxk');
for (var i = 0; i < fx.length; i++) {
fx[i].checked = !fx[i].checked;
}
}
// 批量删除
// plsc:批量删除
document.getElementById('plsc').onclick = function () {
// 找到第二个table里的input
var inputs = document.getElementsByTagName('table')[1].getElementsByTagName('input');
// 进行遍历
for (var i = 0; i < inputs.length; i++) {
// var input = inputs[i];
if (inputs[i].getAttribute('type') == "checkbox" && inputs[i].checked) {
// console.log(111);
document.getElementsByTagName('table')[1].getElementsByTagName('tbody')[0].removeChild(inputs[i].parentNode.parentNode);
i = -1;//相当于var i = trs.length-1; i > 0 ; i--
}
}
};
// 删除
// 不能使用this，this是关键字，不能用来声明参数，经常使用obj来声明参数
// 直接通过行内设置onclick，传入this参数，在js中直接调用onclick调用的函数
function del(obj) {
var table = obj.parentNode.parentNode.parentNode;
// var tr = obj.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是个全局变量
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;
// 找到更新的父节点的父节点,即所有的tr
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>
<!-- // 删除
// document.getElementById('del').onclick = function () {
// // console.log(this);
// var table = obj.parentNode.parentNode.parentNode;
// var tr = obj.parentNode.parentNode;
// this.parentNode.parentNode.remove(tr);
// // this.parents().remove();
// } -->
</html>内容不全
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
