青島模板自助建站李勇seo的博客
1、學生就業(yè)統(tǒng)計表
2、渲染業(yè)務
根據(jù)持久化數(shù)據(jù)渲染頁面
步驟：
①：讀取localstorage本地數(shù)據(jù)
- 如果有數(shù)據(jù)則轉(zhuǎn)換為對象放到變量里面一會使用它渲染頁面
- 如果沒有則用默認空數(shù)組[]
- 為了測試效果，可以先把initData存入本地存儲看效果
②：根據(jù)數(shù)據(jù)渲染頁面。遍歷數(shù)組，根據(jù)數(shù)據(jù)生成tr，里面填充數(shù)據(jù)，最后追加給tboby
（提示）可以利用map()和join()數(shù)組方法實現(xiàn)字符串拼接
- 渲染業(yè)務要封裝成一個函數(shù)render
- 使用map方法遍歷數(shù)組，里面更換數(shù)據(jù)，然后返回有數(shù)據(jù)的tr數(shù)組
- 通過join方法把map返回的數(shù)組轉(zhuǎn)換為字符串
- 把字符串通過innerHTML賦值給tbody?
3、新增業(yè)務
點擊新增按鈕，頁面顯示新的數(shù)據(jù)
步驟：
①：給form注冊提交事件，要阻止默認提交事件（阻止默認行為）
②：非空判斷
如果年齡、性別、薪資有一個值為空，則return返回’輸入不能為空‘中斷程序
③：給arr數(shù)組追加對象，里面存儲表單獲取過來的數(shù)據(jù)
④：渲染頁面和重置表單（reset()方法）
⑤：把數(shù)組數(shù)據(jù)存儲到本地存儲里面，利用JSON.stringify()存儲為JSON字符串
?4、刪除業(yè)務
點擊刪除按鈕，可以刪除對應的數(shù)據(jù)
步驟：
①：采用事件委托形式，給tbody注冊點擊事件
②：得到當前點擊的索引號。渲染數(shù)據(jù)的時候，動態(tài)給a鏈接添加自定義屬性data-id="0"
③：根據(jù)索引號，利用splice刪除數(shù)組這條數(shù)據(jù)
④：重新渲染頁面
⑤：把最新arr數(shù)組存入本地存儲
5、關于stuId的處理
思路：
①：新增加序號應該是最后一條數(shù)據(jù)的stuId + 1
- 數(shù)組[數(shù)組的長度-1].stuId + 1
②：但是要判斷，如果沒有數(shù)據(jù)則是直接賦值為1，否則就采用上面的做法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>學生就業(yè)統(tǒng)計表</title><link rel="stylesheet" href="css/index.css" />
</head><body><h1>新增學員</h1><form class="info" autocomplete="off">姓名：<input type="text" class="uname" name="uname" />年齡：<input type="text" class="age" name="age" />性別: <select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪資：<input type="text" class="salary" name="salary" />就業(yè)城市：<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="廣州">廣州</option><option value="深圳">深圳</option><option value="曹縣">曹縣</option></select><button class="add">錄入</button></form><h1>就業(yè)榜</h1><!-- <div class="title">共有數(shù)據(jù)<span>0</span>條</div> --><table><thead><tr><th>學號</th><th>姓名</th><th>年齡</th><th>性別</th><th>薪資</th><th>就業(yè)城市</th><th>時間</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1</td><td>迪麗熱巴</td><td>22</td><td>女</td><td>20000</td><td>上海</td><td>2099/9/9 08:08:08</td><td><a href="javascript:"><i class="iconfont icon-shanchu"></i>刪除</a></td></tr> --></tbody></table><script>// 參考數(shù)據(jù)const initData = [{stuId: 1,uname: '迪麗熱巴',age: 22,gender: '女',salary: '20000',city: '上海',time: '2099/9/9 08:08:08'}]// localStorage.setItem('data',JSON.stringify(initData))// 1. 渲染業(yè)務// 1.1 先讀取本地存儲的數(shù)據(jù)// （1）本地存儲有數(shù)據(jù)則記得轉(zhuǎn)換為對象然后存儲到變量里面，后期用于渲染頁面// （2）如果沒有數(shù)據(jù)，則用 空 數(shù)組來代替const arr = JSON.parse(localStorage.getItem('data')) || []// 1.2 利用map和join方法來渲染頁面const tbody = document.querySelector('tbody')function render(){// (1) 利用map遍歷數(shù)組，返回對應tr的數(shù)組const trArr = arr.map(function(ele,index){return `<tr><td>${ele.stuId}</td><td>${ele.uname}</td><td>${ele.age}</td><td>${ele.gender}</td><td>${ele.salary}</td><td>${ele.city}</td><td>${ele.time}</td><td><a href="javascript:" data-id={"${index}"}><i class="iconfont icon-shanchu"></i>刪除</a></td></tr> `})console.log(trArr)// (2) 把數(shù)組轉(zhuǎn)換為字符串 join// (3) 把生成的字符串追加給tbodytbody.innerHTML = trArr.join('')// 顯示共計有幾條數(shù)據(jù)// document.querySelector('.title span').innerHTML = arr.length}render()// 2. 新增業(yè)務// 2.1 form表單注冊提交事件，阻止默認行為const info = document.querySelector('.info')const uname = document.querySelector('.uname')const age = document.querySelector('.age')const salary = document.querySelector('.salary')const gender = document.querySelector('.gender')const city = document.querySelector('.city')info.addEventListener('submit',function(e){// 阻止默認行為e.preventDefault()// 2.2 非空判斷if(!uname.value || !age.value || !salary.value) {return alert('輸入內(nèi)容不能為空')}// 2.3 給arr數(shù)組追加對象，里面存儲 表單獲取過來的數(shù)據(jù)arr.push({// 處理stuId： 數(shù)組最后一條數(shù)據(jù)的stuId + 1stuId: arr.length ? arr[arr.length -1].stuId + 1 : 1,uname: uname.value,age: age.value,salary: salary.value,gender:gender.value,city:city.value,time: new Date().toLocaleString()})// 2.4 渲染頁面和重置表單（reset()方法）render()this.reset() // 重置表單// 2.5 把數(shù)組重新存入本地存儲里面，記得轉(zhuǎn)換為JSON字符串存儲localStorage.setItem('data',JSON.stringify(arr))})// 3. 刪除業(yè)務// 3.1 采用事件委托形式，給tbody注冊點擊事件tbody.addEventListener('click', function(e){// 判斷是否點擊的是刪除按鈕if(e.target.tagName === 'A'){// alert(11)// 3.2 得到當前點擊的索引號，渲染數(shù)據(jù)的時候，動態(tài)給a鏈接添加自定義屬性例如data-id="0"console.log(e.target.dataset.id)// 確認框確認是否要刪除if(confirm('您確定要刪除這條數(shù)據(jù)嘛？'))// 3.3 根據(jù)索引號，利用splice 刪除數(shù)組這條數(shù)據(jù)arr.splice(e.target.dataset.id,1)// 3.4 重新渲染頁面render()// 3.5 把最新arr數(shù)組存入本地存儲localStorage.setItem('data',JSON.stringify(arr))}})</script>
</body></html>CSS
* {margin: 0;padding: 0;box-sizing: content-box;
}a {text-decoration: none;color:#721c24;
}
h1 {text-align: center;color:#333;margin: 20px 0;}
table {margin:0 auto;width: 800px;border-collapse: collapse;color:#004085;
}
th {padding: 10px;background: #cfe5ff;font-size: 20px;font-weight: 400;
}
td,th {border:1px solid #b8daff;
}
td {padding:10px;color:#666;text-align: center;font-size: 16px;
}
tbody tr {background: #fff;
}
tbody tr:hover {background: #e1ecf8;
}
.info {width: 900px;margin: 50px auto;text-align: center;
}
.info input, .info select {width: 80px;height: 27px;outline: none;border-radius: 5px;border:1px solid #b8daff;padding-left: 5px;box-sizing: border-box;margin-right: 15px;
}
.info button {width: 60px;height: 27px;background-color: #004085;outline: none;border: 0;color: #fff;cursor: pointer;border-radius: 5px;
}
.info .age {width: 50px;
}