<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Json Test</title>
<style type="text/css">
div
{
padding: 10px;
border: solid 1px #222;
margin: 5px;
font-size: 12px;
}
</style>
<script type="text/javascript">
// 存储用户对象的数据格式
// [
// {'uid':'123','pwd':'123456'},
// {'uid':'124','pwd':'123456'},
// {'uid':'125','pwd':'123456'}
// ]
function $(obj) {
return typeof (obj) == "string" ? document.getElementById(obj) : obj;
}
var json = [];//申明数字
//添加新用户
function add() {
var uid = $('uid').value;
var pwd = $('pwd').value;
for (var i = 0; i < json.length; i++) {
if (json[i].uid == uid) {
return;
}
}
json.push({ "uid": uid, "pwd": pwd });
show(json);
}
//删除用户
function del() {
var uid = $('uid').value;
for (var i = 0; i < json.length; i++) {
if (json[i].uid == uid) {
json.splice(i, 1);
break;
}
}
show(json);
}
//更新用户密码
function frs() {
var uid = $('uid').value;
var pwd = $('pwd').value;
for (var i = 0; i < json.length; i++) {
if (json[i].uid == uid) {
json[i].pwd = pwd;
break;
}
}
show(json);
}
//显示用户列表
function show(json) {
var html = "";
for (var i = 0; i < json.length; i++) {
html += "UID:" + json[i].uid + ";PWD:" + json[i].pwd + "/r/n";
}
$('t').innerText = html;
}
</script>
</head>
<body>
<input type="hidden" value="" id="selectedUsers" />
<div>
UID:<input type="text" id="uid" /> PWD:
<input type="text" id="pwd" />
<a href="javascript:void(0);" title="" onclick="add();">添加用户</a> <a
href="javascript:void(0);"
title="" onclick="del();">删除用户</a> <a href="javascript:void(0);"
title="" onclick="frs();">更新用户</a>
</div>
<div>
现有用户:
<p id="t">
</p>
</div>
</body>
</html>
分享到:
相关推荐
精通Javscript+jQuery 精通Javscript+jQuery
JavScript完全自学手册 书本源码
javscript IE 性能 调试 IE的调试工具 ,sIEve-0.0.8 JSLint, The JavaScript Code Quality Tool IEDevToolBarSetup
javscript中json对象和Array数组的区别
Javscript调用后台方法(示例) Javscript调用后台方法(示例)
photoshop-javscript-脚本指南2019
现代 javscript 编程
精通Javscript+jQuery.pdf 精通Javscript+jQuery.pdf 精通Javscript+jQuery.pdf
Javscript & TypeScript学习总结
链表数据结构(Javascript) 此存储库包含有关使用javascript进行数据结构链接列表和使用jest进行测试的练习。 链表数据结构有三种类型(单链,双链和循环),但在此文档中,我们重点关注单链表。 在此仓库中,我将...
主要介绍了Javscript调用iframe框架页面中函数的方法,可实现iframe之间传值或修改值,是非常实用的技巧,需要的朋友可以参考下
资源名称:Javscript与HTML实用教程 内容简介: 一本将Javascript 与Html结合起来共同讲解的实用书籍,清淅度一般,不过内容较丰富,其中还有大量实例,学习起来轻松快速。 ...
272个JavScript经典实例,很实用,很基础的。基础实例
Javscript高性能编程+Javascript异步编程 高清晰PDF
jsRules使用简单易懂的JSON实现,可以通过网页,移动应用程序甚至手动操作轻松地对其进行编辑...将这些规则掌握在了解它们的人的手中,而无需聘请开发人员进行简单的更改。我该如何实施? 将JAR导入任何Java应用...