JavaScript를 사용하여 테이블을 합산하는 방법

인터넷이 발전하면서 점점 더 많은 웹사이트에서 데이터를 표시하기 위해 테이블을 사용해야 합니다. 표에서 합산은 매우 기본적인 작업입니다. JavaScript에서는 루프를 사용하여 테이블 합계 기능을 구현할 수 있습니다. 이 기사에서는 JavaScript를 사용하여 테이블을 합산하는 방법을 보여줍니다.

HTML 테이블 구조

테이블 합계 방법을 소개하기 전에 먼저 HTML의 테이블 구조를 이해해 봅시다.

위에서 볼 수 있듯이 기본 HTML 테이블은 table, thead, tbody, tr, th 및 td와 같은 요소로 구성됩니다.

그 중 table은 테이블 전체를 나타내고, thead는 테이블 헤더, tbody는 테이블 본문, tr은 데이터 행, th는 헤더 셀, td는 데이터 셀을 나타냅니다.

JavaScript 테이블 합산 구현

다음으로 JavaScript를 사용하여 테이블 합산 기능을 구현하는 방법을 소개하겠습니다.

먼저 테이블에서 합산해야 할 데이터 셀을 찾아야 합니다. 위의 예에서는 성적을 합산해야 합니다. 다음 코드를 사용하여 점수 셀을 가져올 수 있습니다.

const Score = document.querySelectorAll('table tbody tr td:nth-child(3)');

위 코드에서 querySelectorAll 함수는 모든 테이블을 가져올 수 있습니다. 의 td 요소입니다. 그 중 :nth-child(3)은 각 행의 세 번째 td 요소, 즉 grade 셀을 구한다는 뜻이다.

다음으로, 획득한 성적 셀을 반복하고 각 값을 더해야 합니다. 코드는 다음과 같습니다:

let sum = 0;
scores.forEach((score) => {
sum += Number(score.innerText);
});

위 코드에서 우리는 forEach 함수는 모든 성적 셀을 순회하고 각 값을 합계 변수에 누적합니다. innerText는 문자열 유형의 값을 반환하므로 이를 숫자 유형으로 변환하려면 Number 함수를 사용해야 합니다.

마지막으로 페이지에 sum 값을 표시하면 됩니다. 코드는 다음과 같습니다.

const result = document.createElement('div');
result.innerText = 总分：${sum};
document.body.append(result);

위 코드를 통해 지정된 열을 구현할 수 있습니다. 테이블 Sum 함수에서.

요약

이 기사에서는 JavaScript를 사용하여 HTML 테이블에서 합계 작업을 수행하는 방법을 소개하고, 순회 및 누적 작업을 사용하여 마지막으로 계산 결과를 페이지에 표시하는 간단한 합계 작업을 수행합니다. 구현됩니다.

테이블 작업은 웹 개발의 필수적인 부분이며, 이러한 지식을 익히는 것은 개발 효율성을 높이는 데 중요합니다. 이 기사에 소개된 내용은 독자가 표 형식 데이터 처리에서 JavaScript 적용에 대해 더 깊이 이해하는 데 도움이 될 수 있으며, 독자가 JavaScript 개발을 위한 우수한 실용적인 아이디어를 더 깊이 이해하여 우수한 응용 프로그램을 더 잘 개발하는 데 도움이 될 수 있습니다.

위 내용은 JavaScript를 사용하여 테이블을 합산하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!