어제 오늘 내일

for문을 이용하여 테이블 생성하기 for 반복문을 이용해서 테이블을 동적으로 생성하는 예제입니다. const rowCnt = 5; const columnCnt = 2; document.write(''); for (let i = 0; i < rowCnt; i++) { document.write(''); for (let j = 0; j < columnCnt; j++) { document.write(''); document.write(i + ", " + j); document.write(''); } document.write('') } document.write(''); 테이블은 아래와 같이 가장 바깥을 태그로 감싸고, 하나의 row를 표현하는 태그, 그리고 그 안의 데이터를 표현하는 태그로 작성할 수 있습..

테이블의 특정 열의 값들의 합계를 계산하는 방법입니다. 테이블 합계 계산하기 사과100 오렌지200 바나나300 function calcSum() { // table element 찾기 const table = document.getElementById('fruits'); // 합계 계산 let sum = 0; for(let i = 0; i < table.rows.length; i++) { sum += parseInt(table.rows[i].cells[1].innerHTML); } // 합계 출력 document.getElementById('sum').innerText = sum; } 위 예제는 '합계 계산' 버튼을 클릭하면, 테이블의 2번째 column의 값들을 모두 더해서 출력해 줍니다. 각 row..

이번에는 버튼을 클릭하여 테이블에 행을 추가하고 삭제하는 방법을 알아보도록 하겠습니다. 1. 테이블에 행 추가하기 - insertRow(), insertCell() 2. 테이블에 행 삭제하기 - deleteRow() 1. 테이블에 행 추가하기 - insertRow(), insertCell() insertRow(), insertCell() 함수 테이블에 행(Row)를 추가하기 위해서는 insertRow(), insertCell() 함수를 사용합니다. insertRow() var newRow = HTMLTableElement.insertRow(index); table element에 새로운 행을 추가해 줍니다. 파라미터 index 새로 생성된 행(row)가 테이블에 들어갈 위치 index를 넣어줍니다. 파라..

HTML에서 테이블을 표현하고, 테이블의 셀을 병합하는 방법을 알아보도록 하겠습니다. 먼저, HTML로 테이블을 그리는 방법을 모른다면 지난 포스팅을 참조하세요. [HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th) [HTML] 테이블 제목 지정하기, caption tag 아래 예제 테이블을 가지고 가로, 세로 셀 병합을 해 보도록 하겠습니다. 학년 반 1 1 1 2 2 1 세로 셀 병합하기 (rowspan) 학년 반 1 1 2 2 1 위 코드는 2개의 '1학년' 항목이 2 row가 병합되었습니다. 2개의 row가 병합되었으므로, 결국 세로 방향으로 합쳐진 셀이 만들어진 것입니다. 여러줄의 row를 병합 할때는 위의 예시처럼 병합을 시작하려는 cell에 rowspan을 정..