JSon实现数据的增删改（简单实例）

时间：2015-08-01 21:50:43 阅读：172 评论：0 收藏：0 [点我收藏+]

标签：

利用JSon实现数据的增删改

完成一个密码箱的小程序，功能是选择网站，显示相应的帐号和密码

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script>
            var data={
                    "data":[
                            {
                                "web":"百度",
                                "username":"baidu123",
                                "password":"123baidu"
                            },
                            {
                                "web":"腾讯",
                                "username":"qq123",
                                "password":"123qq"
                            },
                            {
                                "web":"搜狐",
                                "username":"sohu123",
                                "password":"123sohu"
                            }
                    ]
                }
            
            function showList(){    
                    var webList = document.getElementById("webList");
                    for(var key in data.data){
                        var option = document.createElement("option");
                        option.innerHTML=data.data[key].web;
                        webList.appendChild(option);
                        //alert(key);
                    }
                    var webText = document.getElementById("webText");
                    var usernameText = document.getElementById("usernameText");
                    var passwordText = document.getElementById("passwordText");
                    webText.value=data.data[0].web;
                    usernameText.value=data.data[0].username;
                    passwordText.value=data.data[0].password;
            }
            
            function showData(){
                var webText = document.getElementById("webText");
                var usernameText = document.getElementById("usernameText");
                var passwordText = document.getElementById("passwordText");
                var index=document.getElementById("webList").selectedIndex;
                webText.value=data.data[index].web;
                usernameText.value=data.data[index].username;
                passwordText.value=data.data[index].password;
            }
            
            function deleteData(){  
                var index=document.getElementById("webList").selectedIndex;
                delete data.data[index];
                document.getElementById("webList").innerHTML="";

　　　　　　　　　　for(var i=index; i<data.data.length-1 ;i++){
　　　　　　　　　　　　　　　data.data[i]=data.data[i+1];

　　　　　　　　　　}
　　　　　　　　　　data.data.length-=1;


                showList();
            }
            
            function updateData(){
                var index=document.getElementById("webList").selectedIndex;
                data.data[index].web=document.getElementById("webText").value;
                data.data[index].username=document.getElementById("usernameText").value;
                data.data[index].password=document.getElementById("passwordText").value;
                
                document.getElementById("webList").innerHTML="";
                showList();
            }
            
            function addData(){
                var web=document.getElementById("webText").value;
                var username=document.getElementById("usernameText").value;
                var password=document.getElementById("passwordText").value;
                var add={"web":web,"username":username,"password":password};
                data.data.push(add);
                
                document.getElementById("webList").innerHTML="";
                showList();
            }
    </script>
</head>

<body onload="showList();">
    网站列表：<select id="webList" onchange="showData();"></select>
    <div>
        网站：&nbsp;&nbsp;<input id="webText" type="text" /><br />
        用户名：<input id="usernameText" type="text" /><br />
        密码：&nbsp;&nbsp;<input id="passwordText" type="text" /><br />
        <input type="button" value="添加" onclick="addData();" />
        <input type="button" value="删除" onclick="deleteData();" />
        <input type="button" value="修改" onclick="updateData();" />
    </div>
</body>
</html>

JSon实现数据的增删改（简单实例）

标签：

原文地址：http://www.cnblogs.com/sjy123/p/4694596.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行