1+
2+ // 新增按钮
3+ const btn_add = document . querySelector ( '.btn-add' )
4+ const info = document . querySelector ( '.info' )
5+ btn_add . addEventListener ( 'click' , function ( ) {
6+ info . style . visibility = 'visible'
7+ } )
8+ //取消按钮
9+ // const info_btn_cancel = document.querySelector('.info-button-cancel')
10+ // info_btn_cancel.addEventListener('click', function () {
11+ // info.style.visibility = 'hidden'
12+ // })
13+
14+
15+ const tbody = document . querySelector ( 'tbody' )
16+ const info_main = document . querySelector ( '.info-main' )
17+ //新增信息
18+ const arr = [ ]
19+ const info_btn_submit = document . querySelector ( '.info-button-submit' )
20+ info_btn_submit . addEventListener ( 'click' , function ( e ) {
21+ // info_main.addEventListener('submit', function (e) {
22+ e . preventDefault ( )
23+ const num2 = document . querySelector ( '.num2' )
24+ const uname = document . querySelector ( '.uname' )
25+ const xy = document . querySelector ( '.xy' )
26+ const zy = document . querySelector ( '.zy' )
27+ const grade = document . querySelector ( '.grade' )
28+ const class1 = document . querySelector ( '.class1' )
29+ const age = document . querySelector ( '.age' )
30+ //表单验证
31+ //获取所有带有name属性的元素
32+ // const items = document.querySelectorAll('[name]')
33+ // // console.log(items);
34+
35+ // for (let i = 0; i < items.length; i++) {
36+ // if (items[i].value === '') {
37+ // return alert('输入内容不能为空')
38+ // }
39+ // }
40+
41+ const obj = {
42+ stuId : arr . length + 1 ,
43+ num2 : num2 . value ,
44+ uname : uname . value ,
45+ xy : xy . value ,
46+ zy : zy . value ,
47+ grade : grade . value ,
48+ class1 : class1 . value ,
49+ age : age . value ,
50+
51+ }
52+ arr . push ( obj )
53+ // stuId.value = ''
54+ num2 . value = ''
55+ uname . value = ''
56+ xy . value = ''
57+ zy . value = ''
58+ grade . value = ''
59+ class1 . value = ''
60+ age . value = ''
61+ console . log ( arr ) ;
62+ render ( )
63+ info . style . visibility = 'hidden'
64+
65+ // })
66+ } )
67+ // info_main.addEventListener('submit', function (e) {
68+ // e.preventDefault()
69+ // const num2 = document.querySelector('.num2')
70+ // const uname = document.querySelector('.uname')
71+ // const xy = document.querySelector('.xy')
72+ // const zy = document.querySelector('.zy')
73+ // const grade = document.querySelector('.grade')
74+ // const class1 = document.querySelector('.class1')
75+ // const age = document.querySelector('.age')
76+
77+ // const obj = {
78+ // stuId: arr.length + 1,
79+ // num2: num2.value,
80+ // uname: uname.value,
81+ // xy: xy.value,
82+ // zy: zy.value,
83+ // grade: grade.value,
84+ // class1: class1.value,
85+ // age: age.value,
86+
87+ // }
88+ // arr.push(obj)
89+ // num2.value = ''
90+ // uname.value = ''
91+ // xy.value = ''
92+ // zy.value = ''
93+ // grade.value = ''
94+ // class1.value = ''
95+ // age.value = ''
96+ // // console.log(arr);
97+ // render()
98+
99+ // })
100+ function render ( ) {
101+ tbody . innerHTML = ''
102+ for ( let i = 0 ; i < arr . length ; i ++ ) {
103+ const tr = document . createElement ( 'tr' )
104+ tr . innerHTML = `
105+ <th><input type="checkbox" class="check-sg"></th>
106+ <th>${ arr [ i ] . stuId }
107+ <th>${ arr [ i ] . num2 }
108+ <th>${ arr [ i ] . uname }
109+ <th>${ arr [ i ] . xy }
110+ <th>${ arr [ i ] . zy }
111+ <th>${ arr [ i ] . grade }
112+ <th>${ arr [ i ] . class1 }
113+ <th>${ arr [ i ] . age }
114+ <th>
115+ <a href="javascript:">查看</a>
116+ <a href="javascript:" data-id=${ i }
117+ </th>
118+ `
119+ if ( i % 2 === 1 ) {
120+ tr . classList . add ( 'tr1' )
121+ }
122+ else {
123+ tr . classList . add ( 'tr2' )
124+ }
125+ tbody . appendChild ( tr )
126+ }
127+ }
128+
129+
130+ //删除操作:最右侧操作
131+ tbody . addEventListener ( 'click' , function ( e ) {
132+ if ( e . target . tagName === 'A' ) {
133+ if ( e . target . textContent === '删除' ) {
134+ // console.log(e.target);
135+ // console.log(e.target.dataset.id);
136+ arr . splice ( e . target . dataset . id , 1 ) ;
137+ // console.log(arr);
138+ render ( ) ;
139+ }
140+ }
141+ } )
142+ //删除操作:最左侧操作
143+ // 当点击 tr 中的第一个 input 时
144+ const dataId1 = 0
145+ tbody . addEventListener ( 'click' , function ( e ) {
146+ if ( e . target . tagName === 'INPUT' && e . target . classList . contains ( 'check-sg' ) ) {
147+ // 获取与 input 相关的 tr
148+ const tr = e . target . closest ( 'tr' ) ;
149+
150+ // 从 tr 中获取 “删除” 链接的 data-id
151+ const deleteLink = tr . querySelector ( 'a[data-id]' ) ;
152+ if ( deleteLink ) {
153+ const dataId = deleteLink . getAttribute ( 'data-id' ) ;
154+ // console.log(dataId);
155+ dataId1 = dataId
156+ }
157+ }
158+ } ) ;
159+
160+ //删除按钮
161+ const btn_delete = document . querySelector ( '.btn-delete' )
162+ btn_delete . addEventListener ( 'click' , function ( ) {
163+ arr . splice ( dataId1 , 1 )
164+ render ( )
165+ } )
166+
167+ //全选
168+ const checkAll = document . querySelector ( '.check-all' )
169+ const cks = document . querySelectorAll ( '.check-sg' )
170+ checkAll . addEventListener ( 'change' , function ( ) {
171+ for ( let i = 0 ; i < cks . length ; i ++ ) {
172+ cks [ i ] . checked = checkAll . checked
173+ }
174+ } )
175+ //反选
176+ for ( let i = 0 ; i < cks . length ; i ++ ) {
177+ cks [ i ] . addEventListener ( 'click' , function ( ) {
178+ checkAll . checked = document . querySelectorAll ( '.check-sg:checked' ) . length === cks . length
179+ } )
180+ }
181+
182+ //查看学生信息
183+ const examine = document . querySelector ( '#examineCancel' )
184+ const examineBlock = document . querySelector ( '#examineBlock' )
185+ examine . addEventListener ( 'click' , function ( ) {
186+ examineBlock . style . display = 'none'
187+ } )
188+ //点击查看按钮
189+ tbody . addEventListener ( 'click' , function ( e ) {
190+ if ( e . target . tagName === 'A' ) {
191+ if ( e . target . textContent === '查看' ) {
192+ // console.log(e.target);
193+ // console.log(e.target.dataset.id);
194+ // arr.splice(e.target.dataset.id, 1);
195+ // console.log(arr);
196+ // render();
197+ // console.log(e.target.textContent);
198+ examineBlock . style . display = 'block'
199+
200+
201+ }
202+ }
203+ } )
0 commit comments