티스토리 뷰
몇시간째 고생해서.. 만든코드입니다.
소계,합계
산출내역서... 가지고 만들어봅니다.
function inputNumber(input) {
// 현재 커서 위치를 저장
const cursorPosition = input.selectionStart;
// 입력값에서 숫자만 남기고 제거
const value = input.value.replace(/,/g, '');
// 천 단위 콤마 추가
const formattedValue = Number(value).toLocaleString();
// 포맷팅된 값으로 설정
input.value = formattedValue;
// 포맷팅 후에도 원래 커서 위치 유지
input.setSelectionRange(cursorPosition, cursorPosition);
}
// 숫자 포맷팅 함수 (콤마 추가)
function formatNumber(value) {
return new Intl.NumberFormat().format(value);
}
// 숫자에서 콤마를 제거하는 함수
function cleanNumber(value) {
return parseFloat(value.replace(/,/g, '')) || 0;
}
function calculateRowTotal(row) {
const suInput = row.querySelector('.su-input');
const areaLengthInput = row.querySelector('.area-length-input');
const areaPriceInput = row.querySelector('.area-price-input');
const unitPriceInput = row.querySelector('.unit-price-input');
// 요소가 존재하는지 확인 후 값 읽기
const su = suInput ? cleanNumber(suInput.value) : 1;
const areaLength = areaLengthInput ? cleanNumber(areaLengthInput.value) : 1; // 없으면 1로 처리
const areaPrice = areaPriceInput ? cleanNumber(areaPriceInput.value) : 1;
let unitPrice = unitPriceInput ? cleanNumber(unitPriceInput.value) : 1;
let totalPrice = 0;
// areaPrice 소수점 둘째 자리까지 반올림
const roundedAreaPrice = parseFloat(areaPrice.toFixed(2));
// 콘솔에 현재 값을 출력해보기
console.log('수량(su):', su);
console.log('면적 길이(areaLength):', areaLength);
console.log('면적 단가(roundedAreaPrice):', roundedAreaPrice);
console.log('단가(unitPrice):', unitPrice);
if (roundedAreaPrice) {
unitPrice = areaLength * roundedAreaPrice; // 기본 수량 * 단가
totalPrice = Math.ceil(su * parseFloat(unitPrice.toFixed(0))); // 기본 수량 * 단가
console.log('계산된 단가 (unitPrice):', unitPrice);
console.log('계산된 총합(totalPrice):', totalPrice);
}
else if (areaLength) {
totalPrice = Math.ceil( su * areaLength * parseFloat(unitPrice.toFixed(0)) ) ; // 기본 수량 * 단가
console.log('계산된 총합(totalPrice) (면적이 있을 경우):', totalPrice);
}
else {
totalPrice = Math.ceil(su * parseFloat(unitPrice.toFixed(0)) ); // 기본 수량 * 단가
console.log('계산된 총합(totalPrice) (면적이 없을 경우):', totalPrice);
}
// 총 합계를 표시
const totalCell = row.querySelector('.total-price');
if (totalCell) {
totalCell.textContent = formatNumber(totalPrice);
}
return Math.ceil(totalPrice);
}
function calculateSubtotalBySerial(serialNumber) {
let subtotal = 0;
// 해당 일련번호에 해당하는 행들만 선택
const rows = document.querySelectorAll(`.calculation-row[data-serial="${serialNumber}"]`);
rows.forEach(row => {
subtotal += calculateRowTotal(row); // 각 행의 총 합계 계산
});
// 해당 일련번호의 소계 셀 업데이트
const subtotalCell = document.querySelector(`.subtotal-cell[data-serial="${serialNumber}"]`);
if (subtotalCell) {
subtotalCell.textContent = formatNumber(subtotal);
} else {
console.error(`소계 셀을 찾을 수 없습니다. 일련번호: ${serialNumber}`);
}
return subtotal;
}
function calculateAllSubtotals() {
let grandTotal = 0;
// 모든 일련번호에 대한 소계를 계산
const uniqueSerials = new Set();
document.querySelectorAll('.calculation-row').forEach(row => {
uniqueSerials.add(row.dataset.serial); // 중복되지 않는 일련번호 수집
});
uniqueSerials.forEach(serialNumber => {
grandTotal += calculateSubtotalBySerial(serialNumber); // 각 일련번호의 소계를 계산
});
return grandTotal;
}
function calculateGrandTotal() {
const grandTotal = calculateAllSubtotals();
const grandTotalCell = document.querySelector('.grand-total'); // 전체 합계 셀 클래스 접근
if (grandTotalCell) {
grandTotalCell.textContent = formatNumber(grandTotal);
} else {
console.error("전체 합계 셀을 찾을 수 없습니다. '.grand-total'이라는 클래스가 올바르게 설정되었는지 확인해주세요.");
}
}
// 이벤트 리스너 설정
document.querySelectorAll('input').forEach(input => {
input.addEventListener('input', function() {
const row = input.closest('tr'); // 해당 input이 속한 행을 찾음
calculateRowTotal(row); // 해당 행의 총합 계산
calculateAllSubtotals(); // 소계 계산
calculateGrandTotal(); // 전체 합계 계산
});
});
// 페이지 로드 시 초기 계산
window.onload = function() {
calculateAllSubtotals();
calculateGrandTotal();
};
'IT tech Coding > javascript' 카테고리의 다른 글
웹개발시 자주 사용하는 파일업로드시, 저장시 등 활용모달 (0) | 2024.11.19 |
---|---|
자바스크립트로 현재날짜 넣는 간단 방법 (0) | 2024.10.22 |
자바스크립트로 window 창을 띄울때 컴퓨터의 해상도에 따라서 팝업창이 뜨게 하는 코드 (0) | 2024.09.26 |
달력의 일자를 균등배분해서 나타내기 (0) | 2024.09.01 |
자동으로 엑셀처럼 행을 추가하는 javascript 코드 연구 (0) | 2024.08.23 |
- Total
- Today
- Yesterday
- 코딩튜토리얼
- 뫄프로그래밍
- 1. #웹개발 2. #로트번호 3. #성적서보기 4. #ajax 5. #jquery 6. #php 7. #프론트엔드 8. #백엔드 9. #부트스트랩 10. #웹기능구현
- 파이썬코드줄바꿈방법
- 엑셀셀보호
- isset을 적용해야 하는 이유
- #프로그램설치
- Bootstrap 5
- 엑셀입력보호
- #InstallForge
- 티스토리챌린지
- 효율적코딩방법
- json파일편하게보는법
- 캐드자동작도
- chatGPT3.5파이썬버전
- 스크립트작성기초
- 오블완
- 오토핫키가이드
- 코딩효율성
- json파일형태보기
- General error: 2031
- #파이썬패키징
- ajax오류메시지
- 엑셀보호
- 도면자동생성
- 구글드라이브API
- sql문장 날짜계산
- 테크에능한여성
- 프로그래머생활
- coalesce는 한국어로 "코얼레스크" 또는 "코얼리스"
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |