kejames 學習筆記本

這裡是Kejames的筆記本，歡迎各位網友給予指教，謝謝。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

一個簡單的JavaScript動態委派事件範例

Posted on 2007-10-09 19:09  Kejames  阅读(392)  评论(0)    收藏  举报

今天幫個網友解決一個小問題，順便就把做法寫出來，讓JavaScript入門的網友們參考一下^^"
其主要功能為動態的取得 Textbox A1與B1的值進行相加，再把結果顯示於Result1裡。
Textbox A 與 Textbox B 任一者輸入後，會將輸入的值同時更新至Textbox A 與 Textbox B裡。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">

    window.onload = function(){
        for(itemNo = 1; itemNo <= 2 ; itemNo++ ){
            var tbA = document.getElementById("tb_A_" + itemNo);
            var tbB = document.getElementById("tb_B_" + itemNo);
            tbA.onblur=function(){chgTbA_TheSame_TbB1(this);}            
            tbB.onblur=function(){chgTbA_TheSame_TbB1(this);}
        }        
    }
    function chgTbA_TheSame_TbB1(objName){
        var objArr = objName.id.split("_");
        var sType = objArr[1];
        var itemNo = objArr[2];
        var tbA = document.getElementById("tb_A_" + itemNo);
        var tbB = document.getElementById("tb_B_" + itemNo);
        var tbR = document.getElementById("tb_R_" + itemNo);
        if(sType=='A'){
            tbB.value=tbA.value;
        }else{
            tbA.value=tbB.value;
        }
        tbR.value = parseInt(tbA.value) + parseInt(tbB.value) ;
    }
        
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  A1:<input type="text" id="tb_A_1" /> B1:<input type="text" id="tb_B_1" /> Result1:<input readonly="true" type="text" id="tb_R_1" />
  <br/>
  A2:<input type="text" id="tb_A_2" /> B2:<input type="text" id="tb_B_2" /> Result2:<input readonly="true" type="text" id="tb_R_2" />

</form>
</body>
</html>