[javascript] 성적 등록 기능 (appendChild/createElement)

[javascript] 성적 등록 기능 (appendChild/createElement)

---

✔️ 성적 등록 기능

<tbody id="score-main">
    <tr id="input-form" align="center" onchange="sumAvg();">
        <td><input type="text" name="hak" id="hak" onfocus="this.select();"></td>
        <td><input type="text" name="name" id="name" onfocus="this.select();"></td>
        <td><input type="text" name="birth" id="birth" onfocus="this.select();"></td>
        <td><input type="text" name="kor" id="kor"  onfocus="this.select();"></td>
        <td><input type="text" name="eng" id="eng"  onfocus="this.select();"></td>
        <td><input type="text" name="mat" id="mat"  onfocus="this.select();"></td>
        <td><input type="text" name="tot" id="tot" readonly="readonly" style="border: none; text-align: center;"></td>
        <td><input type="text" name="ave" id="ave" readonly="readonly" style="border: none; text-align: center;"></td>
        <td>
            <button type="button" class="btn" onclick="insertScore();" style="width: 100%;">등록하기</button>
        </td>
    </tr>
</tbody>

- 등록하기 버튼을 누르면 성적이 등록된다.

- 모든 항목이 유효성 검사를 통과해야 등록될 수 있다.

- 기존 값들은 아래 축적되고, 새로운 성적 등록 칸이 비어있는 상태로 생성된다.

 

1) 유효성 검사부터 하기

	if(! check("input-form")){
		return;
	}

 

2) tr 태그 가져오기 / td 태그 가져오기 / tbody 가져오기

td 태그 용도 : td에 저장된 값을 가져올 때 써야함.

tr 태그 용도 : 새로운 td를 만들면 tr에 저장해야함

tbody : 새로운 td가 채워진 tr을 저장해야함

	const inputForm = document.querySelector("#input-form");
	const inputEls = inputForm.getElementsByTagName("input");
	const scoreMain = document.querySelector("#score-main"); //t바디
	//scoreMain 은 새로 만들어지는 row 를 appendChild 할 공간이다.

 

3) 변수 정의하기

row 는 새로운 tr과 관련된 변수

cell 은 새로운 td와 관련된 변수

span 은 수정/삭제 버튼을 만들기 위한 변수

✨ id 값을 주는 이유 : 나중에 수정, 삭제할 때 id로 접근할 필요가 있어서 만들어준다.

	let tr = scoreMain.getElementsByTagName("tr");
	if(tr.length ===1){ //한줄일때
		nID = 1;
	}
	nID++;
	
	let id = "row"+nID;
	let row, cell, span; 
		//cell은 새로 추가할 td 하나를 의미
	let tot, ave, s;

 

4) 새로운 tr에 속성 추가

속성 추가하지 않으면 이상하게 출력된다. 

마우스가 over되면 class 중 'over'이란 클래스 적용되도록 기능을 추가했다.

가 out하면 removeAttribute 로 속성을 제거한다.

	row = document.createElement("tr"); // <tr></tr> 만들기
	row.setAttribute("id", id);
	row.setAttribute("height", "30");
	row.setAttribute("align", "center");
	row.onmouseover = function() {this.setAttribute("class", "over");};
	row.onmouseout = function() {this.removeAttribute("class");};

 

5) ⭐⭐ 성적 등록 절차! (어떤 논리도 돌아가는지)

일단 유효성 검사를 끝낸 6가지 값들이 입력되어있다.(총점/평균 빼고)

등록 과정은 간단하게 말하자면,

- 기존 td의 input 값(s) 가져오기

- 새로운 td만들기

- 새로운 td에 TextNode로 값 추가

- td를 tr(row) 객체에 뒤로 추가(appendChild)

- 기존 td의 값은 삭제!("") 

//첫번째 inputEls의 첫번째 값인 '학번'부터 시작이다.
	tot = 0;
	for(let i=0; i<6; i++){
		s = inputEls[i].value.trim();
		cell = document.createElement("td"); //td 6번 만들기
		cell.appendChild(document.createTextNode(s));
		//createTextNode 만들어진 요소 안에 text 넣는것 
		//row = tr. tr에 td 를 append
		row.appendChild(cell);
		
		if(i>=3 && i<=5){
			tot += parseInt(s);
		}
		//새 td에 추가한 값은 깨끗하게 비워주기
		inputEls[i].value = "";	
	}

 

6) 총점/평균 값도 모두 지우고 새로운 td로 추가

ave = Math.floor(tot/3);
	 
	 inputEls[6].value = "";
	 inputEls[7].value = "";
	 inputEls[0].focus();
	 
	 
	 //tot와 ave 모두 값을 지우고 새로운 td로 추가했다.
	 cell = document.createElement("td");
	 cell.appendChild(document.createTextNode(tot));
	 row.appendChild(cell);
	
	 cell = document.createElement("td");
	 cell.appendChild(document.createTextNode(ave));
	 row.appendChild(cell);

 

여기까지 결과!

---

 

7) 수정, 삭제 버튼 만들기 

수정과 삭제는 span 태그로 나란히 둬야한다.

수정, 삭제 함수를 만들면 나중에 onclick 이벤트로 따로 추가한다.

	 //수정, 삭제 버튼 만들기 (둘은 span 태그로 나란히 할 것임.)
	 cell = document.createElement("td");
	 span = document.createElement("span");
	 span.appendChild(document.createTextNode("수정"));
	 
	 cell.appendChild(span);
	 cell.appendChild(document.createTextNode(" | "));
	 
	 span = document.createElement("span");
	 span.appendChild(document.createTextNode("삭제"));
	 cell.appendChild(span);

 

8) tr, tbody 에 지금까지 만든 내용 추가

	 //모두 tr에 추가하기
	 row.appendChild(cell);
	 
	 //이렇게 다 추가한 row를 main 영역 테이블에 추가하기
	scoreMain.appendChild(row);