Javascript [ QuerySelector - For / QuerySelectorAll - For ]

양혜정·2024년 4월 7일

javascript_web

목록 보기

19/81

QuerySelector - For

arr_total, arr_avg, arr_grade 배열 참고 확인
하나의 값일 경우 for 문에 item 로 표현

let html = `<table>
				<tr>
					<th>학번</th>
					<th>성명</th>
					<th>국어</th>
                   	<th>영어</th>
                   	<th>수학</th>
                   	<th>총점</th>
                   	<th>평균</th>
                   	<th>등급</th>
                </tr>`;
배열명.forEach((item, index) => {
	html += `<tr>
				<td>${item.hakbun}</td>
                <td>${item.name}</td>
                <td>${item.kor}</td>
                <td>${item.eng}</td>
                <td>${item.math}</td>
                <td>${arr_total[index]}</td>
                <td>${arr_avg[index]}</td>
                <td>${arr_grade[index]}</td>
			</tr>`;
});

html += `</table>`;

document.querySelector("넣을위치").innerHTML = html;

QuerySelectorAll - For

Nodelist 일 경우 for 문에 elmt 로 표현

// === 합격자 명단 보이기 === //
const tr_list 
	= document.querySelectorAll("table#tbl > tbody > tr");
// tr_list 는 NodeList 이다. [tr,tr...]
let html = `<table>
              <thead>
              	<tr>
              		<th width="50%">합격자명</th>
              		<th>점수</th>
              	</tr>
              </thead>
              <tbody>`;
tr_list.forEach((elmt,index) => {
	if(index < tr_list.length-1 
       && Number(elmt.children[1].innerText) >= 80){
      	html += `<tr>
                	<td>${elmt.children[0].innerText}</td>
                   	<td>${elmt.children[1].innerText}</td>
				</tr>`;
    }
})	//  end of forEach------------
html += `</tbody></table>`;

document.querySelector("넣을장소").innerHTML = html;