> 웹 프론트엔드 > 프런트엔드 Q&A > td 요소를 반복하고 jQuery를 사용하여 합산하는 방법

td 요소를 반복하고 jQuery를 사용하여 합산하는 방법

PHPz
풀어 주다: 2023-04-10 14:29:21
원래의
977명이 탐색했습니다.

웹 개발에서 jQuery는 일반적으로 사용되는 많은 DOM 작업을 캡슐화하고 개발자의 작업을 단순화하는 일반적으로 사용되는 JavaScript 라이브러리입니다. 일반적인 요구 사항 중 하나는 테이블의 열을 합산하는 것입니다. 이 기사에서는 jQuery를 사용하여 td 요소를 탐색하고 합산하는 방법을 소개합니다.

간단한 테이블의 경우 먼저 테이블의 tbody 부분을 가져와야 합니다. 이를 달성하려면 다음 코드를 사용할 수 있습니다.

var tbody = $('table tbody');
로그인 후 복사

다음으로 tbody에서 tr의 각 행을 순회한 다음 각 행을 순회해야 합니다. 필요한 값을 찾기 위해 행의 td 열을 합산하고 td의 숫자를 더합니다. 코드는 다음과 같습니다.

// 需要求和的列的索引值
var columnIndex = 1;
// 用于累加列中的数字
var sum = 0;

// 遍历每个 tr
tbody.find('tr').each(function() {
  // 找到需要求和的列
  var td = $(this).find('td').eq(columnIndex);
  // 将该列中的数字累加起来
  sum += parseInt(td.text());
});

// 输出求和结果
console.log('总和为:' + sum);
로그인 후 복사

위 코드에서 columnIndex 변수는 합계가 필요한 열의 인덱스 값을 나타내며, sum 변수는 해당 열의 숫자를 누적하는 데 사용됩니다. tbody의 각 tr을 순회할 때 find 메소드를 사용하여 해당 행의 columnIndex에 위치한 td를 찾은 다음,parseInt를 사용하여 td의 내용을 숫자로 변환하여 sum에 추가합니다.

실제 사용 시에는 다음 사항에도 주의해야 합니다.

  1. td의 내용이 숫자인지 판단해야 합니다. 숫자가 아닌 경우 td를 건너뛰거나 0으로 처리해야 합니다. .
  2. 부동소수점 숫자의 합에는 정확성 문제로 인해 소수점 뒤에 추가 자릿수가 있을 수 있습니다. 예를 들어, 각 td의 부동 소수점 숫자를 소수점 이하 두 자리까지 합산하거나 합산하기 전에 모든 숫자를 정수로 변환할 수 있습니다.
  3. 여러 테이블의 동일한 열을 합산해야 하는 경우 각 테이블에 대해 별도로 위 코드를 사용하거나 코드를 함수로 캡슐화하여 모든 테이블을 합산할 수 있습니다.

요약하자면, jQuery를 사용하여 td와 sum을 순회하는 것은 비교적 간단한 작업이지만 정확성 문제와 숫자가 아닌 콘텐츠를 처리하는 방법에 주의를 기울여야 합니다. 이 작업에 능숙하면 개발 효율성을 크게 향상시킬 수 있습니다.

위 내용은 td 요소를 반복하고 jQuery를 사용하여 합산하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿