better function to change button

Author: Kiameow

kiameow/data.json

@@ -1,6 +1,6 @@
 {
   "students":[{"id": 1, "number": 22050701, "name": "一二", "college": "计算机科学与工程学院", "major": "软件工程", "grade": 2015, "class": 2, "age": 21},
-              {"id": 2, "number": 22050702, "name": "三四", "college": "计算机科学与工程学院", "major": "计算机科学与工程", "grade": 2015, "class": 2, "age": 20},
+              {"id": 2, "number": 22050702, "name": "三四", "college": "人工智能学院", "major": "人工智能", "grade": 2015, "class": 2, "age": 20},
               {"id": 3, "number": 22050703, "name": "五六", "college": "计算机科学与工程学院", "major": "计算机科学与工程", "grade": 2015, "class": 2, "age": 20},
               {"id": 4, "number": 22050704, "name": "七八", "college": "计算机科学与工程学院", "major": "计算机科学与工程", "grade": 2015, "class": 2, "age": 20},
               {"id": 5, "number": 22050705, "name": "旧事", "college": "计算机科学与工程学院", "major": "计算机科学与工程", "grade": 2015, "class": 2, "age": 20},

kiameow/script.js

@@ -124,8 +124,25 @@ function changeRow(change_button) {
   const gradeInput = dialog.querySelector("input#grade");
   const classInput = dialog.querySelector("input#class");
   const ageInput = dialog.querySelector("input#age");
-  
-  
+
+  numberInput.setAttribute('placeholder', rowChildren[2].innerHTML);
+  nameInput.setAttribute('placeholder', rowChildren[3].innerHTML);
+  gradeInput.setAttribute('placeholder', rowChildren[6].innerHTML);
+  classInput.setAttribute('placeholder', rowChildren[7].innerHTML);
+  ageInput.setAttribute('placeholder', rowChildren[8].innerHTML);
+
+
+
+  const majorSelect = dialog.querySelector("select#majors");
+  const majorOptions = majorSelect.children;
+  Array.from(majorOptions).forEach(option => {
+    if(option.innerHTML === rowChildren[5].innerHTML) {
+      option.setAttribute("selected", "selected");
+    } else {
+      option.removeAttribute("selected");
+    }
+  })
+
   dialog.showModal();
 }
 
@@ -238,9 +255,20 @@ document.addEventListener("DOMContentLoaded", () => {
       checkRow(element);
     } else if(element.className === 'change') {
       const changeDialog = document.querySelector("#change-dialog");
+      const row = element.parentNode.parentNode;
+      const rowChildren = row.children;
       const collegeSelect = changeDialog.querySelector("#colleges");
-      changeRow(element);
+      const collegeOptions = collegeSelect.children;
+      Array.from(collegeOptions).forEach(option => {
+        if(option.innerHTML === rowChildren[4].innerHTML) {
+          option.setAttribute("selected", "selected");
+        } else {
+          option.removeAttribute("selected");
+        }
+      })
       populateMajors(collegeSelect);
+      changeRow(element);
+      // populateMajors(collegeSelect);
     } else if(element.className === 'select') {
       updateDisplayDelete(element, delete_value);
     } else if(element.id === 'select-toggle') {

kiameow/style.css

@@ -130,7 +130,7 @@ dialog {
   background-color: var(--surface1);
   color: var(--element1);
 
-  transition: 0.3s;
+  animation: zoomIn 0.2s ease-in-out;
 }
 
 dialog input, dialog select{
@@ -153,6 +153,17 @@ dialog button {
   padding-right: .5em;
 }
 
+@keyframes zoomIn {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+/* div.hidden {
+  visibility: hidden;
+} */
 /* .skeleton {
   background-color: var(--element3);
 } */