[jQuery] 평수 자동 계산기
이런 스타일의 평수 자동 계산기를 만들기 위해 jQuery를 활용했다. 일단 작동은 제대로 되는 듯 한데.. 역시 허접!!
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td height=”97″ class=”calc_bg” valign=”top”>
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td colspan=”4″ height=”31″></td>
</tr>
<tr>
<td width=”20″ height=”17″></td>
<td width=”38″><input type=”text” name=”vp1″ class=”calc_ed” /></td>
<td width=”31″></td>
<td width=”38″><input type=”text” name=”va1″ class=”calc_ed” readonly /></td>
</tr>
<tr>
<td colspan=”4″ height=”17″></td>
</tr>
<tr>
<td height=”16″></td>
<td><input type=”text” name=”va2″ class=”calc_ed” /></td>
<td></td>
<td><input type=”text” name=”vp2″ class=”calc_ed” readonly /></td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td height=”97″ class=”calc_bg” valign=”top”>
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td colspan=”4″ height=”31″></td>
</tr>
<tr>
<td width=”20″ height=”17″></td>
<td width=”38″><input type=”text” name=”vp1″ class=”calc_ed” /></td>
<td width=”31″></td>
<td width=”38″><input type=”text” name=”va1″ class=”calc_ed” readonly /></td>
</tr>
<tr>
<td colspan=”4″ height=”17″></td>
</tr>
<tr>
<td height=”16″></td>
<td><input type=”text” name=”va2″ class=”calc_ed” /></td>
<td></td>
<td><input type=”text” name=”vp2″ class=”calc_ed” readonly /></td>
</tr>
</table>
</td>
</tr>
</table>
<script type=”text/javascript”>
$(‘input:text[name=vp1]’).keyup(function() {
var vp1 = parseInt($(this).val());
if(vp1 > 0) {
var va1 = Math.round(vp1 * 3.3058);
$(‘input:text[name=va1]’).attr(“value”, va1);
}
});
$(‘input:text[name=va2]’).keyup(function() {
var va2 = parseInt($(this).val());
if(va2 > 0) {
var vp2 = Math.round(va2 / 3.3058);
$(‘input:text[name=vp2]’).attr(“value”, vp2);
}
});
</script>
사용하기 전에 jQuery 파일을 불러와줘야 한다.
jQuery를 사용하면 할 수록 참 편하다는 것을 느끼게 된다. 이걸 자바스크립트로 만들려고 했으면 코드도 지저분하고
여러 가지를 생각했어야 하는데.. jQuery로는 너무도 쉽게 해결이 되니까.. 약간은 싱겁다고 해야할까? 뭐 그렇다.