[Javascript] HTML TABLE 컬럼 합계

[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>