• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Window_Console] JS - console.table() 메서드 - 콘솔에 테이블 쓰기 (= console.table메서드 = 콘솔테이블 메서드)

목차

  1. console.table() 예제 - 콘솔에 테이블 쓰기
  2. console.table() 정의
  3. console.table() 구문
  4. console.table() 예제 - 객체로 테이블 쓰기
  5. console.table() 예제 - 객체 배열로 테이블 쓰기
  6. console.table() 예제 - 특정 컬럼만 보이게하기

 

console.table() 예제 - 콘솔에 테이블 쓰기

※ 테이블 데이터에 배열 넣기

 

<script>

console.table(["홈짱닷컴", "Homzzang.com", "코딩강의"]);

</script>

 

결과값:

PS. 결과확인: F12키  >  Console탭

 

console.table() 정의

 

콘솔에 테이블 메시지 쓰기.

 


 

1.

첫 번째 매개변수 (= 테이블에 넣을 데이터가 담긴 객체/배열)은 필수.

 

2. cf.

console.clear() 메서드 - 콘솔창 청소

console.error() 메서드 - 콘솔에 에러 메시지 쓰기

console.info() 메서드 - 콘솔에 메시지 쓰기

console.log() 메서드 - 콘솔에 메시지 쓰기

console.table() 메서드 - 콘솔에 테이블 쓰기

console.table() 메서드 - 콘솔에 테이블 메시지 쓰기

 

2.

IE8 이상 주요 최신 브라우저 지원

 

 

console.table() 구문

 

console.table(tabledata, tablecolumns)

 


[매개변수]

 

tabledata

필수. 테이블 데이터. (Object 또는 Array 형태)

 

tablecolumns

선택. 테이블 컬럼명 포함하는 배열. (Array 형태)

 

 

console.table() 예제 - 객체로 테이블 쓰기

 

<script>

console.table({ site : "홈짱닷컴", host : "Homzzang.com" });

</script>

 

결과값:

PS. 결과 확인 방법: F12키 > Console탭

 

console.table() 예제 - 객체 배열로 테이블 쓰기

 

<script>

var html = { name : "HTML", role : "뼈대" }

var css = { name : "CSS", role : "디자인" }

var js = { name : "JS", role : "기능동작" }

console.table([html, css, js]);

</script>

 

결과값:

 

console.table() 예제 - 특정 컬럼만 보이게하기

 

<script>

var html = { name : "HTML", role : "뼈대" }

var css = { name : "CSS", role : "디자인" }

var js = { name : "JS", role : "기능동작" }

console.table([html, css, js], ["role"]);

</script>

 

결과값:

 


분류 제목
Window_Console JS - console.timeEnd() 메서드 - 콘솔창에서 타이머 종료 후 기록 쓰기 (= console…
Window_Console JS - console.trace() 메서드 - 코드 실행 내역 역추적해 콘솔에 표시 (= console.t…
Window_Console JS - console.warn() 메서드 - 콘솔에 경고 쓰기 (= console.warn메서드 = 콘솔원…
DOM_Document JS - activeElement 속성 ★ - 현재포커스요소 반환 (= 액티브엘러먼트속성)
DOM_Document JS - addEventListener() 메서드 ★ - document에 이벤트 걸기. (= addEven…
DOM_Document JS - adoptNode() 메서드 ★ - 다른문서의 노드 잘라내서 가져오기 (IE9 이상) ※ 아이프레임…
DOM_Document JS - anchors 속성 - name 속성 갖은 모든 앵커태그집합 반환 (=anchors속성 = 앵커즈 …
DOM_Document JS - applets 속성 - 모든 애플릿태그집합 반환
DOM_Document JS - baseURI 속성 - 웹문서 기본URI 반환 (IE 지원X)
DOM_Document JS - body 속성 - 웹문서본문 설정/반환
DOM_Document JS - close() 메서드 - 웹문서출력모드 닫고 수집된 데이터 표시
DOM_Document JS - document.cookie 속성 ★ - (쿠키이름/쿠키값) 쌍을 설정/반환 (= document.…
DOM_Document JS - charset 속성 - 문자셋 (= 언어셋) 반환 (IE9 이상)
DOM_Document JS - characterSet 속성 - 문자셋 (= 언어셋) 반환 (IE9 이상)
DOM_Document JS - createAttribute() 메서드 ★ - 속성생성 (예: 클릭색상변경)
DOM_Document JS - createComment() 메서드 - 주석생성
DOM_Document JS - createDocumentFragment() 메서드 - 가상노드생성
DOM_Document JS - createElement() 메서드 ★ - 요소생성 (= createElement메서드 = 크리에이…
DOM_Document JS - createEvent() 메서드 - 이벤트객체생성 (예: 마우스오버횟수구하기)
DOM_Document JS - createTextNode() 메서드 - 텍스트노드생성
24/67
목록
찾아주셔서 감사합니다. Since 2012