반응형
[Javascript] HTML TABLE 컬럼 합계
Table 에서 컬럼별 textbox 값의 합계 계산식 입니다. 그대로 복사하여 쓰시면 됩니다.
주석에 설명을 추가하였고, 해당 부분들만 필요에 맞게 변경하시면 됩니다.
<script language="javascript">
function losFocus(id) {
//ID 형식 : txt + "_" + OOO(축약어) + "_" + index
//따라서 앞에 고정 문자열의 개수는 8개(txt_ooo_)
var pDefault_lenght = 8;
//전달받은 ID의 끝자리 Index를 추출해서
//동일 Index를 가지고 있는 ID의 이름에 Index 를 붙여줌.
var pIndex = String(id.substring(pDefault_lenght, id.length));
var pri_name = "txt_pri_" + pIndex; //가격 컬럼의 ID
var qty_name = "txt_qty_" + pIndex; //수량 컬럼의 ID
var tot_name = "tot_amt_" + pIndex; //총 금액 컬럼의 ID
var qty = document.getElementById(qty_name).value; //해당 수량컬럼의 값을 qty 에 저장
var pri = document.getElementById(pri_name).value; //해당 가격컬럼의 값을 pri 에 저장
var tot_amt = qty.replace(",", "") * pri.replace(",", ""); //수량, 또는 금액 값에 ","" 가 입력되있을 때 오류를 방지하기 위해 .replace 로 "," 제거
document.getElementById(tot_name).innerHTML = tot_amt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //총 금액컬럼에 계산된 금액 입력. 3자리마다 "," 입력.
}
function showKeyCode(event, name) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if ((keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 || keyID == 188) {
return;
} else {
return false;
}
}
</script>
<table valign='top' width='100%'>
<tr height='26' bgcolor='#999999'>
<td width="15%" align="center"><b>순번</b></td>
<td width="17%" align="center"><b>일자</b></td>
<td width="20%" align="center"><b>제품명</b></td>
<td width="17%" align="center"><b>가격</b></td>
<td width="15%" align="center"><b>수량</b></td>
<td width="20%" align="center"><b>금액</b></td>
</tr>
</table>
<table valign='top' width='100%'>
<tr height='26' bgcolor='#eeeeee'>
<td width="15%" align="center">1</td>
<td width="17%" align="center">2019.02.02</td>
<td width="20%" align="center">ASUS</td>
<!-- 가격 -->
<td width="17%" align="center">
<center>
<input type='number' id='txt_pri_1' onblur="losFocus(id);" onkeydown="return showKeyCode(event, id)" style="width:80px">
</center>
</td>
<!-- 수량 -->
<td width="15%" align="right">
<center>
<input type='number' id='txt_qty_1' onblur="losFocus(id);" onkeydown="return showKeyCode(event, id)" style="width:80px"> </center>
</td>
<!-- 금액 -->
<td width="20%" align="right">
<b><label id = 'tot_amt_1'></label></b>
</td>
</tr>
<tr height='26' bgcolor='#eeeeee'>
<td width="15%" align="center">2</td>
<td width="17%" align="center">2019.02.02</td>
<td width="20%" align="center">SAMSUNG</td>
<!-- 가격 -->
<td width="17%" align="center">
<center>
<input type='number' id='txt_pri_2' onblur="losFocus(id);" onkeydown="return showKeyCode(event, id)" style="width:80px">
</center>
</td>
<!-- 수량 -->
<td width="15%" align="right">
<center>
<input type='number' id='txt_qty_2' onblur="losFocus(id);" onkeydown="return showKeyCode(event, id)" style="width:80px"> </center>
</td>
<!-- 금액 -->
<td width="20%" align="right">
<b><label id = 'tot_amt_2'></label></b>
</td>
</tr>
<tr height='26' bgcolor='#eeeeee'>
<td width="15%" align="center">3</td>
<td width="17%" align="center">2019.02.02</td>
<td width="20%" align="center">LG</td>
<!-- 가격 -->
<td width="17%" align="center">
<center>
<input type='number' id='txt_pri_3' onblur="losFocus(id);" onkeydown="return showKeyCode(event, id)" style="width:80px">
</center>
</td>
<!-- 수량 -->
<td width="15%" align="right">
<center>
<input type='number' id='txt_qty_3' onblur="losFocus(id);" onkeydown="return showKeyCode(event, id)" style="width:80px">
</center>
</td>
<!-- 금액 -->
<td width="20%" align="right">
<b><label id = 'tot_amt_3'></label></b>
</td>
</tr>
</table>
반응형
'프로그램ing > Javascript' 카테고리의 다른 글
[Jquery] 체크박스 클릭 시 TxtBox 사용 미사용 상태로 (0) | 2019.08.29 |
---|---|
[Javascript] 텍스트박스 숫자만 입력 (0) | 2019.04.03 |
[Javascript] 포커스 아웃 이벤트 (0) | 2019.02.20 |
댓글