Skip to content
This repository was archived by the owner on Oct 17, 2023. It is now read-only.

Commit 57e3913

Browse files
KiameowKiameow
committed
color-mode localize & add function to change button
1 parent 96a6eae commit 57e3913

File tree

3 files changed

+104
-32
lines changed

3 files changed

+104
-32
lines changed

‎kiameow/index.html

Lines changed: 48 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,59 @@ <h3>信息</h3>
4646
</form>
4747
</dialog>
4848

49+
<dialog id="change-dialog">
50+
<h3>修改信息</h3>
51+
52+
<form method="dialog">
53+
<label for="number">学号</label>
54+
<input type="text" placeholder="22050701" id="number"><br />
55+
56+
<label for="name">姓名</label>
57+
<input type="text" placeholder="张三" id="name" autocomplete="name"><br />
58+
59+
60+
<label for="colleges">学院</label>
61+
<select id="colleges" class="colleges">
62+
<option value="JSJ">计算机科学与工程学院</option>
63+
<option value="ZDH">自动化学院</option>
64+
<option value="RGZN">人工智能学院</option>
65+
<option value="WLAQ">网络安全学院</option>
66+
<option value="JX">机械学院</option>
67+
</select>
68+
<br />
69+
70+
71+
<label for="majors">专业</label>
72+
<select id="majors" class="majors">
73+
74+
</select>
75+
<br />
76+
77+
<label for="grade">年级</label>
78+
<input type="text" placeholder="2015" id="grade"><br />
79+
<label for="class">班级</label>
80+
<input type="text" placeholder="2" id="class"><br />
81+
<label for="age">年龄</label>
82+
<input type="text" placeholder="20" id="age"><br /><br/>
83+
84+
<button>取消</button>
85+
<button type="submit">确认</button>
86+
</form>
87+
</dialog>
88+
4989
<dialog id="add-dialog">
5090
<h3>新增信息</h3>
5191

5292
<form method="dialog">
5393
<label for="number">学号</label>
54-
<input type="text" placeholder="22050701"><br />
94+
<input type="text" placeholder="22050701" id="number"><br />
5595

5696
<label for="name">姓名</label>
57-
<input type="text" placeholder="张三"><br />
97+
<input type="text" placeholder="张三" id="name" autocomplete="name"><br />
5898

5999

60100
<label for="colleges">学院</label>
61-
<select id="colleges">
101+
<select id="colleges" class="colleges">
62102
<option value="JSJ">计算机科学与工程学院</option>
63103
<option value="ZDH">自动化学院</option>
64104
<option value="RGZN">人工智能学院</option>
@@ -69,20 +109,20 @@ <h3>新增信息</h3>
69109

70110

71111
<label for="majors">专业</label>
72-
<select id="majors">
112+
<select id="majors" class="majors">
73113

74114
</select>
75115
<br />
76116

77117
<label for="grade">年级</label>
78-
<input type="text" placeholder="2015"><br />
118+
<input type="text" placeholder="2015" id="grade"><br />
79119
<label for="class">班级</label>
80-
<input type="text" placeholder="2"><br />
120+
<input type="text" placeholder="2" id="class"><br />
81121
<label for="age">年龄</label>
82-
<input type="text" placeholder="20"><br /><br/>
122+
<input type="text" placeholder="20" id="age"><br /><br/>
83123

84124
<button>取消</button>
85-
<button>确认</button>
125+
<button type="submit">确认</button>
86126
</form>
87127
</dialog>
88128

‎kiameow/script.js

Lines changed: 52 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
if(!localStorage.getItem('start')){
22
localStorage.setItem('start', 0);
33
}
4-
5-
localStorage.setItem('quantity', 10);
4+
if(!localStorage.getItem('colorMode')){
5+
localStorage.setItem('colorMode', 'light');
6+
}
67

78
function clearData() {
89
document.querySelector("tbody").innerHTML = "";
@@ -104,7 +105,7 @@ function checkRow(check_button) {
104105
checkDialogList.innerHTML = "";
105106
const label = document.querySelector("#head-row");
106107
const labelChildren = label.children;
107-
for(let i=1; i<rowChildren.length-1; i++) {
108+
for(let i=2; i<rowChildren.length-1; i++) {
108109
// console.log(children[i].innerHTML);
109110
let liElement = document.createElement('li');
110111
liElement.innerHTML = `${labelChildren[i].innerHTML}: ${rowChildren[i].innerHTML}`;
@@ -113,6 +114,21 @@ function checkRow(check_button) {
113114
dialog.showModal();
114115
}
115116

117+
function changeRow(change_button) {
118+
const dialog = document.querySelector("#change-dialog");
119+
const row = change_button.parentNode.parentNode;
120+
const rowChildren = row.children;
121+
122+
const numberInput = dialog.querySelector("input#number");
123+
const nameInput = dialog.querySelector("input#name");
124+
const gradeInput = dialog.querySelector("input#grade");
125+
const classInput = dialog.querySelector("input#class");
126+
const ageInput = dialog.querySelector("input#age");
127+
128+
129+
dialog.showModal();
130+
}
131+
116132
function addNewRow() {
117133
// element is the button whose class is "check"
118134
const dialog = document.querySelector("#add-dialog");
@@ -155,7 +171,7 @@ function selectToggle(select_toggle, delete_value) {
155171
}
156172
select.checked = select_toggle.checked;
157173
updateDisplayDelete(select, delete_value);
158-
})
174+
});
159175
}
160176

161177
function deleteRows(delete_value) {
@@ -177,6 +193,11 @@ document.addEventListener("DOMContentLoaded", () => {
177193

178194
fetchData();
179195

196+
const htmlElement = document.querySelector("html");
197+
// const colorMode = htmlElement.getAttribute("color-mode");
198+
const prevColorMode = localStorage.getItem('colorMode');
199+
htmlElement.setAttribute('color-mode', prevColorMode);
200+
180201
document.querySelector("#prev").onclick = () => {
181202
var start = parseInt(localStorage.getItem('start'));
182203
var quantity = parseInt(localStorage.getItem('quantity'));
@@ -200,12 +221,13 @@ document.addEventListener("DOMContentLoaded", () => {
200221
}
201222

202223
document.querySelector("#color-mode").onclick = () => {
203-
const htmlElement = document.querySelector("html");
204224
const colorMode = htmlElement.getAttribute('color-mode');
205225
if(colorMode === 'light') {
206226
htmlElement.setAttribute('color-mode', 'dark');
227+
localStorage.setItem('colorMode', 'dark');
207228
} else {
208229
htmlElement.setAttribute('color-mode', 'light');
230+
localStorage.setItem('colorMode', 'light');
209231
}
210232
}
211233

@@ -215,7 +237,10 @@ document.addEventListener("DOMContentLoaded", () => {
215237
if(element.className === 'check') {
216238
checkRow(element);
217239
} else if(element.className === 'change') {
218-
alert("change");
240+
const changeDialog = document.querySelector("#change-dialog");
241+
const collegeSelect = changeDialog.querySelector("#colleges");
242+
changeRow(element);
243+
populateMajors(collegeSelect);
219244
} else if(element.className === 'select') {
220245
updateDisplayDelete(element, delete_value);
221246
} else if(element.id === 'select-toggle') {
@@ -226,12 +251,14 @@ document.addEventListener("DOMContentLoaded", () => {
226251
} else if(element.id === "delete-confirm") {
227252
resetSelect(delete_value);
228253
} else if(element.id === "add") {
254+
const addDialog = document.querySelector("#add-dialog");
255+
const collegeSelect = addDialog.querySelector("#colleges");
229256
addNewRow();
230-
}
257+
populateMajors(collegeSelect);
258+
}
231259
})
232260

233-
const collegeSelect = document.getElementById('colleges');
234-
const majorSelect = document.getElementById('majors');
261+
const collegeSelects = document.getElementsByClassName('colleges');
235262

236263
const majorsByCollege = {
237264
JSJ: ['软件工程', '计算机科学与工程'],
@@ -241,23 +268,24 @@ document.addEventListener("DOMContentLoaded", () => {
241268
JX: ['车辆工程','工业设计','材料工程']
242269
};
243270

244-
// 初始化专业下拉菜单
245-
function populateMajors() {
246-
const selectedCollege = collegeSelect.value;
247-
majorSelect.innerHTML = ''; // 清空专业下拉菜单
248-
majorsByCollege[selectedCollege].forEach(function(major) {
249-
const option = document.createElement('option');
250-
option.value = major;
251-
option.textContent = major;
252-
majorSelect.appendChild(option); // 添加专业选项到下拉菜单
253-
});
271+
function populateMajors(collegeSelect) {
272+
const selectedCollege = collegeSelect.value;
273+
const formElement = collegeSelect.parentNode;
274+
const majorSelect = formElement.querySelector("select#majors");
275+
majorSelect.innerHTML = ''; // 清空专业下拉菜单
276+
majorsByCollege[selectedCollege].forEach(function(major) {
277+
const option = document.createElement('option');
278+
option.value = major;
279+
option.textContent = major;
280+
majorSelect.appendChild(option); // 添加专业选项到下拉菜单
281+
});
254282
}
255-
256283
// 监听学院选择事件
257-
collegeSelect.addEventListener('change', populateMajors);
258-
259-
// 初始化
260-
populateMajors();
284+
Array.from(collegeSelects).forEach(collegeSelect => {
285+
collegeSelect.addEventListener('change', () => { // collegeSelect.addEventListener("change", populateMajors(collegeSelect)); wrong
286+
populateMajors(collegeSelect);
287+
});
288+
})
261289

262290
// not working...?
263291
// document.querySelectorAll('#add').forEach(function(button) {

‎kiameow/style.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,10 @@ dialog button {
153153
padding-right: .5em;
154154
}
155155

156+
/* .skeleton {
157+
background-color: var(--element3);
158+
} */
159+
156160
:root[color-mode="light"] {
157161
--surface1: #ffffff;
158162
--surface2: #f2f2f2;

0 commit comments

Comments
 (0)