이 게시물은 JavaScript에서 객체 배열로 테이블을 구성하는 절차를 설명합니다.
JavaScript의 객체 배열에서 테이블을 만드는 방법은 무엇입니까?
객체 배열에서 테이블을 생성하려면 다음 방법을 사용합니다.
각각의 방법을 하나씩 알아보자!
방법 1: JavaScript에서 HTML 테이블 문자열을 사용하여 개체 배열에서 테이블 만들기
JavaScript에서 ' 끈 '는 텍스트, 숫자 또는 특수 기호를 저장하는 것입니다. 문자열은 문자 또는 문자 그룹을 큰따옴표나 작은따옴표로 묶어 정의합니다. 보다 구체적으로, 테이블 생성에도 활용됩니다.
Table 문자열을 사용하여 객체 배열에서 테이블을 만드는 것에 대한 명확한 개념을 이해하기 위해 예를 들어 보겠습니다.
예시
이 예에서는 ' '라고 선언하자 정렬 ”하고 몇 가지 값을 할당합니다. 변수 초기화 ' 테이블 ' HTML 테이블 문자열을 저장하려면: 값 '을 설정하여 행당 두 개의 셀을 지정하십시오. 둘 '의 ' 세포 '변수: 다음으로 ' array.for Each() ' 메서드를 사용하여 함수에서 각 배열 요소를 전달합니다. 그런 다음 ' {값} ' 식별자 ' $ ' 내 ' 변수 '에 테이블 닫는 태그를 할당하십시오. 테이블 '를 사용하여 ' += ' 운영자. 그런 다음 테이블의 내용을 해당 컨테이너를 사용하여 생성된 컨테이너에 연결합니다. 이를 위해 ' 비하() '메소드에 id를 전달하고 내부 HTML을 배치하여 변수 테이블 내에서 값을 설정합니다. CSS 파일에서 , 테이블과 해당 데이터 셀에 일부 속성을 적용합니다. 이를 위해 ' 국경 ' 값이 '인 속성' 1px 솔리드 '를 사용하여 표와 해당 셀 주변의 테두리를 설정하고 ' 심 ' 값이 '인 속성' 3픽셀 ' 정의된 테두리에 따라 요소 콘텐츠 주위에 정의된 공간을 생성하려면 다음을 수행합니다. 주어진 코드를 저장하고 HTML 파일을 열고 배열 객체의 테이블을 봅니다. JavaScript의 객체 배열에서 테이블을 만드는 방법을 하나 더 살펴보겠습니다. ' 지도() ” 메서드는 배열의 각 요소에 특정 기능을 적용하고 그 대가로 새로운 배열을 제공합니다. 그러나 이 방법은 원래 배열을 대체하지 않습니다. map() 메서드를 사용하여 객체 배열로 테이블을 구성할 수도 있습니다. '를 사용하여 배열을 만들어 봅시다. 허락하다 ' 키워드. 개체 속성 또는 키에 일부 값 할당: belittlement() 메서드를 사용하여 이미 생성된 컨테이너에 액세스하고 ' insertAdjacentHTML() ” 메서드를 사용하여 테이블 태그를 추가합니다. 사용 ' Object.keys() ' 메서드를 사용하여 정의된 개체의 키에 액세스한 다음 ' 가입하다() ' 안에 제목으로 배치하는 방법 <일> ' 태그: 테이블 헤드 닫기 태그와 테이블 행 및 데이터 열기 태그를 추가한 후 ' 지도() '를 호출하는 '메소드' Object.values() ” 메소드 기능을 개체 키의 각 값에 대해 적용한 다음 “ 가입하다() ” 메소드를 사용하여 행 내에 배치하고 다음 행으로 이동합니다. 보시다시피 정의된 객체 배열에서 테이블을 성공적으로 생성했습니다. 우리는 JavaScript의 객체 배열에서 테이블을 만드는 효율적인 방법을 다루었습니다. JavaScript에서 객체 배열에서 테이블을 구성하기 위해 HTML ' 테이블 ' 문자열 또는 ' 지도() '라는 방법을 사용할 수 있습니다. 그렇게 하려면 id와 함께 div 태그를 지정하십시오. 그런 다음 두 메서드에서 개체 배열을 선언하거나 변수 내에 테이블 태그를 저장하거나 데이터와 함께 연결된 HTML 요소에 직접 반환합니다. 이 게시물에서는 JavaScript를 사용하여 객체 배열에서 테이블을 만드는 방법에 대해 설명했습니다.
배열이었다 = [ '표시' , '참새' , '생선' , '주황색' ] ;
' ;
' 태그. 다음으로 '변수'를 선언합니다. ㅏ ' 인덱스를 증가시키기 위해 추가 ' 나 '를 지정하고 ' 만약에 ' 나머지 셀 값과 생성된 변수가 0이고 값이 ' ㅏ '가 배열의 길이와 같지 않으면 테이블의 다음 줄이나 행으로 나눕니다. 정렬. ~을 위한 각 ( ( 가치, 나는 ) => {
테이블 += ` < TD > $ { 값 } TD > ` ;
~이있다 = 나 + 1 ;
만약에 ( ㅏ % 세포 == 0 && ㅏ != 정렬. 길이 ) {
테이블 += '' ; ' ;
} } ) ;
문서. 비하 ( '컨테이너' ) . 안의 HTML = 테이블 ;
국경 : 1px 솔리드 ;
심 : 3픽셀 ;
}
방법 2: JavaScript에서 map() 메서드를 사용하여 객체 배열에서 테이블 만들기
예시
{ '이름' : '표시' , '나이' : '스물(20)' } ,
{ '이름' : '나 뭐' , '나이' : '서른(30)' } ]
` < 테이블 >< 트르 >< 일 >
. 가입하다 ( '' ) ) . 가입하다 ( ' ' ) } 테이블 > ` )
결론