node-red mysql的增删改查_前端的CRUD增删改查的小例子
前端的CRUD增删改查的小例子
1.效果演示
2.相关代码:
Title*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 0 auto;
}
ul{
list-style: none;
}
ul li{
height: 50px;
border: 1px solid #b0b0b0;
margin-top: 10px;
line-height: 50px;
padding-left: 10px;
}
ul li span{
float: right;
height: 30px;
margin-top: 10px;
color: #fff;
line-height: 30px;
font-size: 12px;
padding: 0 10px;
}
ul li span.update{
background-color: purple;
margin:10px 20px;
}
ul li span.delete{
background-color: red;
}
.addBtn{
height: 50px;
background-color: green;
color: #fff;
text-align: center;
line-height: 50px;
margin-top: 20px;
}
- 苹果 修改删除
- 榴莲 修改删除
- 橘子 修改删除
- 香蕉 修改删除
- 西瓜 修改删除
var addBtn = document.getElementById('addBtn');
var oUl = document.getElementsByTagName('ul')[0];
var upds = document.getElementsByClassName('update');
var dels = document.getElementsByClassName('delete');
addBtn.onclick = function () {
var res = prompt('请输入要添加的内容');//'aa' '' null
if(res){
var oLi = document.createElement('li');
oLi.innerHTML = res+'修改删除';
oUl.appendChild(oLi);
}
};
//修改
/* for(var i = 0; i < upds.length; i++){
upds[i].onclick = function () {
var res = prompt('请输入修改的内容');
if(res){
var oLi = document.createElement('li');
oLi.innerHTML = res+'修改删除';
this.parentNode.parentNode.replaceChild(oLi,this.parentNode);
}
}
}
//删除
for (var i = 0; i < dels.length; i++){
dels[i].onclick = function () {
if(confirm('确定要删除该项吗？')){
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
}*/
//事件委托：利用事件冒泡的机制，将事件绑定给祖先元素，事件发生的时候通过判断事件源的具体信息来做相应的操作
oUl.onclick = function (event) {//event事件对象
event = event || window.event;//处理ie下兼容性
var tar = event.target||event.srcElement; //事件源
console.log(tar);
if(tar.innerHTML === '修改'){
var res = prompt('请输入修改的内容');
if(res){
var oLi = document.createElement('li');
oLi.innerHTML = res+'修改删除';
oUl.replaceChild(oLi,tar.parentNode);
}
}
if(tar.innerHTML === '删除'){
if(confirm('确定要删除该项吗？')){
oUl.removeChild(tar.parentNode);
}
}
}