테이블 대신 DOM을 통해 데이터를 렌더링하는 방법

Question

만들고 있는 애플리케이션에 대해 궁금한 점이 있는데, 오라클 데이터베이스를 사용하고 있는데, 데이터베이스에서 정보를 얻어 테이블을 통해 화면에 표시하고 있는데, 데이터를 개별적으로 처리해 보고 싶은데, 단락을 만들고 값을 표시하는 것과 같습니다.

테이블로만 데이터를 표현할 수 있는데 다른 방법이 있나요? 누구든지 나를 도울 수 있다면 정말 감사하겠습니다.

코드 개선을 위한 모든 조언을 받아들입니다.

내 Index.html페이지

으아악

이것은 내가 선택하고 데이터를 보내는 나의 Index.js입니다

으으으으

Answer 1

가정:

시나리오를 정확하게 재현할 수는 없으므로 클라이언트 측에 초점을 맞추고 백엔드 엔드포인트가 배열을 올바르게 반환할 것이라고 가정하겠습니다. 예: data[iRow][iColumn]

이러한 가정은 다음과 같은 줄에서 나옵니다. cell1.innerHTML = data[i][0];

정적 정의 데이터 예:

데이터가 단지 배열의 배열인지, 아니면 열 이름으로 열 값을 처리할 수 있는 방법이 있는지 잘 모르겠습니다. 어쨌든, 우리는 당신의 말에 따라 작동하는 것처럼 보이기 때문에 여기서는 일반 배열 패러다임을 고수할 것입니다.

여기서 각각 2개의 행과 10개의 열이 있는 data 배열을 정의합니다.

으아악

열 이름 및 순서 정의:

SQL 쿼리를 표시한 이후 데이터베이스에서 가져온 열의 순서를 말할 수도 있습니다. 순서가 지정된 목록은 다음과 같습니다.

DATREA、HORREA、CODORI、NUMORP、CODPRO、CODDER、QTDRE1、QTDRFG、CODLOT、OPERADOR

JS에서는 다음과 같이 문자열 배열로 정의합니다.

으아악

행 배열을 객체로 변환:

행 data을 앞서 표시된 열 목록의 이름을 딴 행과 열 속성을 갖는 객체 배열로 변환합니다.

으아악

데이터의 첫 번째 행(data[0])에 대해 다음 개체가 반환됩니다.

으아악

이 데이터를 문서에 어떻게 표시하나요?

구체적인 목표에 따라 이를 수행할 수 있는 방법은 무제한입니다. 실제로 배열을 객체로 변환할 필요는 없지만 인덱스 번호를 사용하는 대신 이름으로 해당 열에 액세스하는 것이 더 쉽습니다.

어쨌든, 예를 들어 모든 열 데이터를 내용으로 연결하여 각 행을 단일 단락의 내용으로 표시해야 하는 경우:

으아악

데모:

지금까지 말한 내용에 대한 실시간 데모는 다음과 같습니다.

으아악 으아악 으아악