简单的增删该

PROMULGATOR

不爱听情歌

上海市

← flex简约导航(原创)

→ 前端裁剪图片并上传的做法整理

相关代码

table数据增删改查

简单的增删该

jQuery对table表格进行增删改查

jquery增删改查数据操作

vuejs增删改（自创）

localStage数据储存的封装

jQuery购物车功能实现代码

Html

Css

Js

.box {
	width:300px;
	height:300px;
	background-color:red;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-150px;
}
th {
	height:80px;
	width:80px;
}

var add = document.querySelector("#add");
var box = document.querySelector(".box");
var cancel = document.querySelector("#cancel");
var save = document.querySelector("#save");
var userpwd = document.querySelector("#userpwd");
var username = document.querySelector("#username");
//获取
var tbody = document.getElementsByTagName('tbody')[0];
var flag;
var curTr;
//声明
add.onclick = function() {
    //点击事件
    box.style.display = "block";
    username.value = "";
    userpwd.value = ""; //再次打开清空
    flag = true;
    //从高到低查找
}
//点击取消后隐藏
cancel.onclick = function() {
    box.style.display = "none";
}
//点击保存后进行操作
save.onclick = function() {
    box.style.display = "none";
    //点击保存后消失
    var nameValue = username.value;
    var pwdValue = userpwd.value;
    //获取密码和用户名，重新命名
    if (flag) {
        addUser(nameValue, pwdValue);
    } else {
        update(curTr);
    }
}

function addUser(name, pwd) {
    //创建一个tr节点
    var tr = document.createElement("tr");
    var nameTd = document.createElement("td");
    var nameNode = document.createTextNode(name);
    //创建新的节点，天剑内容
    nameTd.appendChild(nameNode);
    tr.appendChild(nameTd);
    //将新的节点内容添加到tr中去
    //按钮操作
    var pwdTd = document.createElement("td");
    var pwdNode = document.createTextNode(pwd);
    pwdTd.appendChild(pwdNode);
    tr.appendChild(pwdTd);
    //上，pwd的位置
    var controlTd = document.createElement("td");
    var delBtn = document.createElement("button");
    var delValue = document.createTextNode("删除");
    //创建新的节点，button。并命名为”删除
    delBtn.appendChild(delValue);
    //对内容进行操作
    //添加点击事件
    delBtn.onclick = function() {
        tbody.removeChild(tr);
    }
    var updateBtn = document.createElement("button");
    var updateValue = document.createTextNode("修改");
    updateBtn.appendChild(updateValue);
    //添加新的节点，button,"修改"
    //点击事件
    updateBtn.onclick = function() {
        box.style.display = "block";
        flag = false;
        //点击修改的时候调用
        curTr = this.parentNode.parentNode;
        //获取当前的name和pwd
        var nameValue = curTr.children[0].innerHTML;
        var pwdValue = curTr.children[1].innerHTML;
        username.value = nameValue;
        userpwd.value = pwdValue;
    }
    controlTd.appendChild(delBtn);
    controlTd.appendChild(updateBtn);
    tr.appendChild(controlTd);
    tbody.appendChild(tr);
}

function update(cur) {
    console.log("修改");
    //获取到新值
    var newName = username.value;
    var newPwd = userpwd.value;
    cur.children[0].innerHTML = newName;
    cur.children[1].innerHTML = newPwd;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简单的增删该



代码描述：用原生js写的增删该，密码的修改，表单的修改皆可用

原生的js写的增删该，用户名登录，对表单，和登录都有较好的理解和认识

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单的增删该-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号