利用原生js做数据管理平台

摘要：数据管理平台在当今社会中运用十分广泛，我们在应用过程中，要对数据进行存储，管理，以及删除查询等操作，而我们在实际设计的时候，大牛们大多用到的是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' οnclick='chooseInput(" + index + ")'   οndblclick='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;}}//点击全选的inputfunction 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' οnclick='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();
}