网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
<title>jQuery电话簿(storage本地存储)</title>
<style>
button.confirm-btn {
border-radius: 5px;
margin: 3px 0;
}
电话
地址
增加用户
</tbody>
</table>
<script>
编号 | 姓名 | 电话 | 地址 | 操作 |
! function(window, document, $, undefined) {
// 创建一个电话本业务的对象
let TelBook = {
// 程序的入口,在外面执行这个程序只要调用入口文件即可
init() {
// 在入口文件中绑定所有事件(初始化事件)
this.initEvent();
// 不加this,调用全局
this.renderTable()
},
initEvent() {
$(‘.confirm-btn’).on(‘click’, {
obj: this
}, this.confirmBtnClick)
$(‘tbody’).on(‘click’, ‘.del-btn’, {
obj: this
}, this.onDelBtnClick)
$(‘tbody’).on(‘click’, ‘.update-btn’, {
obj: this
}, this.onUpdataBtnClick)
},
onUpdataBtnClick(e) {
let id = KaTeX parse error: Expected '}', got 'EOF' at end of input: …(key => { if ((#${key}
).length > 0) {
KaTeX parse error: Expected 'EOF', got '#' at position 3: (`#̲{key}`).val(obj[key])
}
})
$(‘.confirm-btn’).html(‘修改用户’).attr(‘id’, id)
},
onDelBtnClick(e) {
let arr = e.data.obj.get();
let id = $(this).attr(‘uId’);
let index = arr.findIndex(item => item.id == id);
arr.splice(index, 1);
e.data.obj.save(arr);
e.data.obj.renderTable()
},
confirmBtnClick(e) {
let arr = e.data.obj.get();
let obj = {};
$(‘input’)
.each(function(index, item) {
obj[item.id] = $(item).val()
}).val(‘’)
if (this.id) {
obj.id = this.id;
arr = arr.map(item => {
if (item.id == this.id) {
item = obj
}
return item;
})
} else {
obj.id = Date.now();
arr.push(obj);
}
e.data.obj.save(arr);
e.data.obj.renderTable();
this.id = ‘’
},
renderTable() {
let arr = this.get();
let newArr = [];
$.each(arr, (index, item) => {
newArr.push(
`
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
😕/bbs.csdn.net/topics/618668825)**
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!