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);

}

}

}