Js realizes simple addition, deletion, modification and query
Using JavaScript to implement simple addition, deletion, modification and search work should be a difficult problem for most JS beginners.
Below I have written a simple case for you. In this case, the add operation is not implemented. You can explore it yourself.
html structure
In the structure, we simply use a table to implement it.
The following div is to facilitate our display and hiding, so a separate div is set up.
<table>
<thead>
<tr>
<th>姓名</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>jon1</td>
<td>15239111596</td>
<td>
<button class="del">删除</button>
<button class="ref">修改</button>
</td>
</tr>
<tr>
<td>jon2</td>
<td>13223009270</td>
<td>
<button class="del">删除</button>
<button class="ref">修改</button>
</td>
</tr>
<tr>
<td>jon3</td>
<td>15093773181</td>
<td>
<button class="del">删除</button>
<button class="ref">修改</button>
</td>
</tr>
</tbody>
</table>
<div id="content">
<input type="text">
<input type="text">
<button class="confirm">确认修改</button>
<button class="cancel">取消</button>
</div>
CSS styles
There is nothing special to ask about the style. You can set it up as needed.
*{
margin: 0;
padding: 0;
outline: none;
}
table{
width: 600px;
margin: 0 auto;
text-align: center;
border: 1px solid #333333;
/*合并表格边框属性*/
border-collapse: collapse;
}
td,th{
height: 40px;
border: 1px solid #333333;
}
div{
width: 600px;
margin: 20px auto;
/*默认条件下div隐藏*/
display: none;
}
JavaScript logic
I have annotated each step of the specific implementation process of the logic to make it easier for everyone to read. I will not explain them one by one here.
var TB = document.getElementsByTagName('tbody')[0];
var myContent = document.getElementById('content');
// 给tbody绑定点击事件（事件委托）
TB.onclick = function (e) {
// 如果当前点击的是删除按钮
if (e.target.className == 'del') {
// 弹出一个询问框，并用x接收返回值 ----
// 询问框返回值只有两个 点击确认：true 点击取消：false
var x = confirm('确认删除吗？');
// 如果x值为真，即点击了确认，删除所在行
if (x) {
// e.target 为当前点击对象--->删除按钮
// e.target.parentElement ---> td
// e.target.parentElement.parentElement ---> tr
TB.removeChild(e.target.parentElement.parentElement);
}else{
TB.removeChild();
}
}
// 如果当前点击的是修改按钮
if(e.target.className == 'ref'){
// 下面的div要显示出来
myContent.style.display = "block";
// 给每一个输入框赋初始值
/*
这是让 myContent.children[0] 第一个输入框的value（输入框中显示的字为姓名）
e.target.parentElement.parentElement ---> tr
e.target.parentElement.parentElement.children[0] ---> tr的第一个子节点，即姓名所在的td
*/
myContent.children[0].value = e.target.parentElement.parentElement.children[0].innerText;
// 这与第一个原理如出一辙
myContent.children[1].value = e.target.parentElement.parentElement.children[1].innerText;
// 给div绑定点击事件（事件委托），这里形参用ev是为了区别上面的e
myContent.onclick = function(ev){
// 如果点击的是确认修改
if (ev.target.className == 'confirm') {
// 下面的div要隐藏起来
myContent.style.display = "none";
// 点击了确认修改就把文本框的value值赋值给对应td的文本
e.target.parentElement.parentElement.children[0].innerText = myContent.children[0].value;
e.target.parentElement.parentElement.children[1].innerText = myContent.children[1].value;
}
// 如果点击的是取消，下面的div同样要隐藏，之所以这样写，是因为只有点击这两个按钮才会执行隐藏操作
if (ev.target.className == 'cancel') {
myContent.style.display = "none";
}
}
}
}
Effect when clicking delete button
After clicking Confirm in the pop-up box.
After clicking Cancel in the pop-up box,
click the modify button
. After modifying the second text box, click Confirm the modification.
