<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function on(){
//获得指定元素。
var usn = document.getElementById("username").value;
var pwd =document.getElementById("password").value;
var tb = document.getElementById("tb");
//tb.appendChild()
//创建需要添加的元素。
var tr = document.createElement("tr");
//创建信息的td.
var tdInfo = document.createElement("td");
//创建用来显示的用户名
var inputusn = document.createElement("input");
inputusn.setAttribute("type","text");
inputusn.setAttribute("value",usn);
inputusn.setAttribute("disabled",true);
//创建用来显示的用户名。
var showusn = document.createTextNode("用户名:");
var showpsw = document.createTextNode("密码:");
var inputpsw = document.createElement("input");
inputpsw.setAttribute("type","password");
inputpsw.setAttribute("value",pwd);
inputpsw.setAttribute("disabled",true);
//向tdInfo中添加数据 。
tdInfo.appendChild(showusn);
tdInfo.appendChild(inputusn);
tdInfo.appendChild(showpsw);
tdInfo.appendChild(inputpsw);
tr.appendChild(tdInfo);
//tb.appendChild(tr);
//创建按钮组。
var tdBtn = document.createElement("td");
//添加查看按钮。(selectButton , 弹窗显示账号密码。)
var selectButton = document.createElement("button");
var selectButtonText = document.createTextNode("查看");
selectButton.setAttribute("onclick","sel(this)");
selectButton.appendChild(selectButtonText);
tdBtn.appendChild(selectButton);
//点击删除整行元素。 添加提示框效果。 confirm...
var deleteButton = document.createElement("button");
var deleteButtonText = document.createTextNode("删除");
deleteButton.setAttribute("onclick","del(this)");
deleteButton.appendChild(deleteButtonText);
tdBtn.appendChild(deleteButton);
//点击修改按钮，可以当前行表单变成可用状态。
var updateButton = document.createElement("button");
var deleteButtonText = document.createTextNode("修改");
updateButton.setAttribute("onclick","upd(this)");
updateButton.appendChild(deleteButtonText);
tdBtn.appendChild(updateButton);
tr.appendChild(tdBtn);
tb.appendChild(tr);
}
function sel(obj){
//alert("查看");
//alert(obj.parentNode.previousSibling.innerHTML);
var childs = obj.parentNode.previousSibling.childNodes;
alert("用户名是:"+childs[1].value+"密码是:"+childs[3].value);
//alert(childs.length)
}
function del(obj){
var tb = document.getElementById("tb");
tb.removeChild(obj.parentNode.parentNode);
}
function upd(obj){
//parentNode 父节点 previousSibling 上一个兄弟节点。 childNodes 所有的子节点集合
var childs = obj.parentNode.previousSibling.childNodes;
childs[1].disabled=false;
childs[3].disabled=false;
}
</script>
</head>
<body>
<input type="text" name="username" id="username" value="" />
<input type="password" name="password" id="password" value="" />
<input type="button" value="添加" οnclick="on()"/>
<hr />
<table id="tb" border="1" >
</table>
</body>
</html>
1436
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
