利用原生js做数据管理平台
生活随笔
收集整理的這篇文章主要介紹了
利用原生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(); }代碼較長，對于各部分，已經用注釋給分開，而css對于功能影響不大，因此我們沒有對css進行設置。弄清楚這段代碼，初學者會有很大進步。
轉載于:https://www.cnblogs.com/zhangxinlei/p/7501168.html
總結
以上是生活随笔為你收集整理的利用原生js做数据管理平台的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 6、Flutter Error wait
- 下一篇： php百度地图普通ip定位,使用百度地图