摘要：数据管理平台在当今社会中运用十分广泛，我们在应用过程中，要对数据进行存储，管理，以及删除查询等操作，而我们在实际设计的时候，大牛们大多用到的是JQuery，而小白对jq理解也较困难，为了让大家回顾一下原生js，也为了让初学者对js熟练掌握，我们利用js进行设计，里面涉及到函数，事件，对象，已经存储，代码如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .tr:hover {

                background-color: #ccc;

            }

        </style>

    </head>

    <body>

        别名(key):<input type="" name="" id="name" value="" /><br /> 网站名：

        <input type="" id="Webname" /><br /> 网址：

        <input type="" id="Web" /><br />

        <input type="button" name="" id="" value="点击提交信息" onclick="func1()" />

        <br />

        <h4>网站登录</h4> 网站名：

        <input type="" id="loginName" /><br /> 网址： 网址 <input type="" id="loginPwd" /><br />

        <button onclick="login()">登录</button>

        <h1>已经储存的网站</h1>

        <input type="button" value="删除网站" onclick="delSite()" /><br />

        <input type="text" placeholder="别名" id="search1" />

        <input type="text" placeholder="网站名" id="search2" />

        <input type="text" placeholder="网址" id="search3" />

        <input type="button" name="" id="" value="查询网站" onclick="searchSite()" />

        <table style="width: 500px;border-collapse: collapse;" border="1" id="table">

            <thead>

                <tr>

                    <th>

                        <input type="checkbox" id="checkAll" onclick="checkAll()" />

                    </th>

                    <th>序号</th>

                    <th>别名</th>

                    <th>网站名</th>

                    <th>网站</th>

                </tr>

            </thead>

            <tbody id="tbody"></tbody>

        </table>

        <!--<div style="width: 100vw;height: 100vh;background-color: blue;position: absolute; top: 0px;left: 0px;">

            <div id=""   style="width: 300px;height: 200px;background-color: red;">

            </div>

        </div>

            -->

        别名(key):<input type="" name="" id="name1" value="" /><br /> 网站名：

        <input type="" id="Webname1" /><br /> 网址：

        <input type="" id="Web1" /><br />

        <input type="button" name="" id="" value="修改确定" onclick="dateSites1()" />

        <script type="text/javascript" src="js/菜鸟教程.js">

        </script>

    </body>

</html>
//注册

function func1() {

    var name = document.getElementById("name").value;

    var Webname = document.getElementById("Webname").value;

    var Web = document.getElementById("Web").value;

    var site = {

        name: name,

        Webname: Webname,

        Web: Web

    }

    if(localStorage.sites == undefined) {

        var arr = [];

    } else {

        var str = localStorage.sites;

        var arr = JSON.parse(str);

    }

    for(var i = 0; i < arr.length; i++) {

        if(arr[i].name == name) {

            alert("姓名已经注册");

            return;

        }

    }

    arr.push(site);

    var str = JSON.stringify(arr);

    localStorage.sites = str;

    alert("储存完毕");

    showAllSite();

}

//展示

function showAllSite() {

    if(localStorage.sites == undefined) {

        return;

    }

    var str = localStorage.sites;

    var arr = JSON.parse(str);

    var html = "";

    arr.forEach(function(item, index) {

        html += "<tr class='tr' onclick='chooseInput(" + index + ")'   ondblclick='dateSites(" + index + ")'><td><input type='checkbox' value='" + index + "' class='checkbox'/></td><td>" + (index + 1) + "</td><td>" + item.name + "</td><td>" + item.Webname + "</td><td>" + item.Web + "</td></tr>";

    });

    var tbody = document.getElementById("tbody");

    tbody.innerHTML = html;

}

//进来刷新

window.onload = function() {

    showAllSite();

}

//登录

function login() {

    var loginName = document.getElementById("loginName").value;

    var loginPwd = document.getElementById("loginPwd").value;

    var str = localStorage.sites ? localStorage.sites : "[]";

    var arr = JSON.parse(str);

    for(var i = 0; i < arr.length; i++) {

        if(arr[i].Webname == loginName && arr[i].Web == loginPwd) {

            alert("登录成功！");

            var loginUser = JSON.stringify(arr[i]);

            sessionStorage.loginUser = loginUser;

            location = "跳转.html";

            return;

        }

    }

    alert("登录失败！！！");

}

/*window.onload = function(){

　　var div1 = document.getElementById("div11");

　　div1.onmousedown = function(ev){

　　　　var oevent = ev || event;

　　　　var distanceX = oevent.clientX - div1.offsetLeft;

　　　　var distanceY = oevent.clientY - div1.offsetTop;

　　　　document.onmousemove = function(ev){

　　　　　　var oevent = ev || event;

　　　　　　div1.style.left = oevent.clientX - distanceX + 'px';

　　　　　　div1.style.top = oevent.clientY - distanceY + 'px';

　　　　};

　　　　document.onmouseup = function(){

　　　　　　document.onmousemove = null;

　　　　　　document.onmouseup = null;

　　　　};

    }

};*/

/*单击tr选中tr里面的input*/

function chooseInput(index) {

    var checkboxs = document.getElementsByClassName("checkbox")[index];

    if(checkboxs.checked) {

        checkboxs.checked = false;

    } else {

        checkboxs.checked = true;

    }

}

//点击全选的input

function checkAll() {

    var thisInput = document.getElementById("checkAll");

    var checkboxs = document.getElementsByClassName("checkbox");

    for(var i = 0; i < checkboxs.length; i++) {

        if(thisInput.checked) {

            checkboxs[i].checked = true;

        } else {

            checkboxs[i].checked = false;

        }

    }

}

/*删除*/

function delSite() {

    var checkboxs = document.getElementsByClassName("checkbox");

    var count = 0;

    var str = localStorage.sites;

    var arr = JSON.parse(str);

    for(var i = 0; i < checkboxs.length; i++) {

        if(checkboxs[i].checked) {

            var index = parseInt(checkboxs[i].value) - count;

            arr.splice(index, 1);

            count++;

        }

    }

    localStorage.sites = JSON.stringify(arr);

    if(count == 0) {

        alert("请至少选择一项");

    } else {

        alert("删除成功，删除了" + count + "项");

        showAllSite();

    }

}

/*

 * 查询网站

 */

function searchSite() {

    var name = document.getElementById("search1").value;

    var Webname = document.getElementById("search2").value;

    var Web = document.getElementById("search3").value;

    var str = localStorage.sites;

    var arr = JSON.parse(str);

    var newArr = []; //用于装载，符合条件的数据

    for(var i = 0; i < arr.length; i++) {

        var isWzm = true,

            isBm = true,

            isWz = true;

        if(arr[i].name.indexOf(name) == -1 && name != "") {

            isWzm = false;

        }

        if(arr[i].Webname.indexOf(Webname) == -1 && Webname != "") {

            isBm = false;

        }

        if(arr[i].Web != Web && Web != "") {

            isWz = false;

        }

        if(isWzm && isBm && isWz) {

            arr[i].index = i; // 把查询出的数据，在localStorage里面的下标，暂存到新数组的每个对象的index属性上

            newArr.push(arr[i]);

        }

    }

    var html = "";

    console.log(newArr);

    newArr.forEach(function(item, index) {

        html += "<tr class='tr' onclick='chooseInput(" + index + ")'><td align='center'><input type='checkbox' value='" + item.index + "' class='checkbox' /></td><td>" + (index + 1) + "</td><td>" + item.name + "</td><td>" + item.Webname + "</td><td>" + item.Web + "</td></tr>";

    });

    var tbody = document.getElementById("tbody");

    tbody.innerHTML = html;

}

//修改网站

var updateIndex = 0;

function dateSites(index) {

    alert(index);

    var str = localStorage.sites;

    var arr = JSON.parse(str);

    document.getElementById("name1").value = arr[index].name;

    document.getElementById("Webname1").value = arr[index].Webname;

    document.getElementById("Web1").value = arr[index].Web;

    updateIndex = index;

}

function dateSites1() {

    var str = localStorage.sites;

    var arr = JSON.parse(str);

    var name = document.getElementById("name1").value;

    var Webname = document.getElementById("Webname1").value;

    var Web = document.getElementById("Web1").value;

    for(var i = 0; i < arr.length; i++) {

        if(arr[i].name == name) {

            alert("网站名已经注册，请更换网站名");

            return;

        }

    }

    var site = {

        name: name,

        Webname: Webname,

        Web: Web,

    };

    arr.splice(updateIndex, 1, site);

    localStorage.sites = JSON.stringify(arr);

    showAllSite();

}

代码较长，对于各部分，已经用注释给分开，而css对于功能影响不大，因此我们没有对css进行设置。弄清楚这段代码，初学者会有很大进步。

最新文章

  1. SharedPreferences保存数据
  2. javascript关键字和保留字
  3. FreeMarker的教程
  4. DCMTK3.6.0(MD支持库)安装说明
  5. How To: Perl TCP / UDP Socket Programming using IO::Socket::INET
  6. LeetCode39 Combination Sum
  7. Graduate Summer School: Deep Learning, Feature Learning
  8. 中文Win7下成功安装calabash-android步骤
  9. 【转】WF4.0 (基础篇)
  10. 物理机与虚拟机IP互ping通，而互ping主机名不通
  11. 《JS权威指南学习总结--6.8对象的三个属性》
  12. 6.Hibernate单向的多对一 关联映射
  13. 功率W与dBm的对照表及关系（转）
  14. SmokePing 部署实践
  15. Smarty学习笔记（一）
  16. Python抓取百度汉字笔画的gif
  17. 6. svg学习笔记-路径
  18. vue组件通信那些事儿
  19. WebService Client Generation Error with JDK8
  20. ASP.NET MVC ViewBag/ViewData/TempData区别

热门文章

  1. Apache Storm 1.1.0 中文文档 | ApacheCN
  2. [目标检测]YOLO原理
  3. 采用OCR识别自动识别财务报表
  4. AndroidTv Home界面实现原理（一）——Leanback 库的使用
  5. 排序算法——选择排序(js语言实现)
  6. selenium python自动化测试 ddt数据驱动
  7. 关于Jaccard相似度在竞品分析中的一点思考
  8. awk知识点全回顾
  9. JAVA 文件编译执行与虚拟机(JVM)简单介绍
  10. mkyaffs2image制作根文件系统、使用NFS挂载虚拟机目录（2）